diff --git a/docs/chore/cleanup-preview-repo/01-getting-started/installation.html b/docs/chore/cleanup-preview-repo/01-getting-started/installation.html
index 02a41a7b0c..87a450f725 100644
--- a/docs/chore/cleanup-preview-repo/01-getting-started/installation.html
+++ b/docs/chore/cleanup-preview-repo/01-getting-started/installation.html
@@ -19,4 +19,4 @@ <h2 class="flow--heading flow--heading--h2">Styles importieren</h2>
 <p>Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.
 Füge diese Zeile zum Einstiegspunkt deines Projektes hinzu.</p>
 <div class="customComponents_preContainer__fE5Ry"><pre class="customComponents_pre__kLHsU"><code class="customComponents_code__kzJRU">import &quot;@mittwald/flow-react-components/styles&quot;;
-</code></pre><button type="button" aria-label="Copy" class="flow--button flow--button--size-s flow--button--primary flow--button--plain customComponents_preCopyButton__T_WNi" data-rac=""><span class="flow--button--content"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-copy flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z"></path><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"></path></svg></span></button></div></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"01-getting-started/installation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/01-getting-started/installation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"01-getting-started/installation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"01-getting-started\\\",\\\"installation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"01-getting-started/installation\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"145:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Installation\"}],\"Willkommen in der Flow Dokumentation!\",\"$undefined\"]}],[\"$\",\"$L144\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$145\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"}}]]}]}],\"$undefined\"]\nb:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Installation\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</code></pre><button type="button" aria-label="Copy" class="flow--button flow--button--size-s flow--button--primary flow--button--plain customComponents_preCopyButton__T_WNi" data-rac=""><span class="flow--button--content"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-copy flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z"></path><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"></path></svg></span></button></div></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"01-getting-started/installation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/01-getting-started/installation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"01-getting-started/installation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"01-getting-started\\\",\\\"installation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"01-getting-started/installation\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"145:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Installation\"}],\"Willkommen in der Flow Dokumentation!\",\"$undefined\"]}],[\"$\",\"$L144\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$145\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"}}]]}]}],\"$undefined\"]\nb:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Installation\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/01-getting-started/installation.txt b/docs/chore/cleanup-preview-repo/01-getting-started/installation.txt
index ae15621c59..278e4f18c3 100644
--- a/docs/chore/cleanup-preview-repo/01-getting-started/installation.txt
+++ b/docs/chore/cleanup-preview-repo/01-getting-started/installation.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","01-getting-started/installation","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","01-getting-started/installation","c"],{"children":["__PAGE__?{\"slug\":[\"01-getting-started\",\"installation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-getting-started/installation","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","01-getting-started/installation","c"],{"children":["__PAGE__?{\"slug\":[\"01-getting-started\",\"installation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-getting-started/installation","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/01-getting-started/stylesheet.html b/docs/chore/cleanup-preview-repo/01-getting-started/stylesheet.html
index a55987bc65..ea3bb9e111 100644
--- a/docs/chore/cleanup-preview-repo/01-getting-started/stylesheet.html
+++ b/docs/chore/cleanup-preview-repo/01-getting-started/stylesheet.html
@@ -83,4 +83,4 @@ <h4 class="flow--heading flow--heading--h4">In einer Komposition verwendete Komp
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    senden zu können musst du die Adresse wieder umbenennen.</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">aside</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"01-getting-started/stylesheet\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/01-getting-started/stylesheet\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"01-getting-started/stylesheet\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"01-getting-started\\\",\\\"stylesheet\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"01-getting-started/stylesheet\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"145:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Stylesheet\"}],\"$undefined\",\"$undefined\"]}],[\"$\",\"$L144\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$145\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"}}]]}]}],\"$undefined\"]\nb:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Stylesheet\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"01-getting-started/stylesheet\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/01-getting-started/stylesheet\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"01-getting-started/stylesheet\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"01-getting-started\\\",\\\"stylesheet\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"01-getting-started/stylesheet\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"145:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Stylesheet\"}],\"$undefined\",\"$undefined\"]}],[\"$\",\"$L144\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$145\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"}}]]}]}],\"$undefined\"]\nb:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Stylesheet\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/01-getting-started/stylesheet.txt b/docs/chore/cleanup-preview-repo/01-getting-started/stylesheet.txt
index 900de74156..7017e895b7 100644
--- a/docs/chore/cleanup-preview-repo/01-getting-started/stylesheet.txt
+++ b/docs/chore/cleanup-preview-repo/01-getting-started/stylesheet.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","01-getting-started/stylesheet","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","01-getting-started/stylesheet","c"],{"children":["__PAGE__?{\"slug\":[\"01-getting-started\",\"stylesheet\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-getting-started/stylesheet","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","01-getting-started/stylesheet","c"],{"children":["__PAGE__?{\"slug\":[\"01-getting-started\",\"stylesheet\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-getting-started/stylesheet","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/actions/action.html b/docs/chore/cleanup-preview-repo/02-components/actions/action.html
index 518d10442c..560b6a9d7e 100644
--- a/docs/chore/cleanup-preview-repo/02-components/actions/action.html
+++ b/docs/chore/cleanup-preview-repo/02-components/actions/action.html
@@ -64,4 +64,4 @@ <h2 class="flow--heading flow--heading--h2">Bestätigungs-Dialog</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    Projekt löschen</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Action</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/actions/action\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/actions/action\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/action\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"actions\\\",\\\"action\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/action\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n14b:T85f,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Pending\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Wenn eine asynchrone Aktion länger als 1000 Millisekunden dauert wird der\\n\", _jsx(_components.code, {\n        children: \"pending\"\n      }), \" State angezeigt.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"longAction\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Feedback\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"feedback\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Bestätigungs-Dialog\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Beinhaltet eine Action ein Modal mit \", _jsx(_components.code, {\n        children: \"slot=\\\"confirmAction\\\"\"\n      }), \", wird dieses Modal\\nfür die Bestätigung der Action angezeigt.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"confirmation\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14c:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Action\"}],\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Action\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$147\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"confirmation\":\"$14c\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Action\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/actions/action\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/actions/action\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/action\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"actions\\\",\\\"action\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/action\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n14b:T85f,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Pending\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Wenn eine asynchrone Aktion länger als 1000 Millisekunden dauert wird der\\n\", _jsx(_components.code, {\n        children: \"pending\"\n      }), \" State angezeigt.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"longAction\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Feedback\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"feedback\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Bestätigungs-Dialog\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Beinhaltet eine Action ein Modal mit \", _jsx(_components.code, {\n        children: \"slot=\\\"confirmAction\\\"\"\n      }), \", wird dieses Modal\\nfür die Bestätigung der Action angezeigt.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"confirmation\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14c:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Action\"}],\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Action\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$147\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"confirmation\":\"$14c\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Action\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/actions/action.txt b/docs/chore/cleanup-preview-repo/02-components/actions/action.txt
index aacf417df4..396418f8ae 100644
--- a/docs/chore/cleanup-preview-repo/02-components/actions/action.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/actions/action.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/actions/action","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/actions/action","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"actions\",\"action\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/actions/action","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/actions/action","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"actions\",\"action\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/actions/action","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/actions/button-group.html b/docs/chore/cleanup-preview-repo/02-components/actions/button-group.html
index 1c6efdf143..3b35ca103f 100644
--- a/docs/chore/cleanup-preview-repo/02-components/actions/button-group.html
+++ b/docs/chore/cleanup-preview-repo/02-components/actions/button-group.html
@@ -47,4 +47,4 @@ <h2 class="flow--heading flow--heading--h2">Zusätzlicher Secondary Button</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    Abbrechen</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">ButtonGroup</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/actions/button-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/actions/button-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/button-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"actions\\\",\\\"button-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/button-group\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T67a,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Danger\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"danger\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Info\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"info\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Zusätzlicher Secondary Button\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"additionalSecondary\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ButtonGroup\"}],\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ButtonGroup\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"ButtonGroup\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/actions/button-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/actions/button-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/button-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"actions\\\",\\\"button-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/button-group\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T67a,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Danger\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"danger\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Info\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"info\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Zusätzlicher Secondary Button\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"additionalSecondary\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ButtonGroup\"}],\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ButtonGroup\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"ButtonGroup\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/actions/button-group.txt b/docs/chore/cleanup-preview-repo/02-components/actions/button-group.txt
index fbae1986d2..66606ebea3 100644
--- a/docs/chore/cleanup-preview-repo/02-components/actions/button-group.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/actions/button-group.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/actions/button-group","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/actions/button-group","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"actions\",\"button-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/actions/button-group","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/actions/button-group","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"actions\",\"button-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/actions/button-group","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/actions/button.html b/docs/chore/cleanup-preview-repo/02-components/actions/button.html
index 79dfab5bc5..e538ade8c4 100644
--- a/docs/chore/cleanup-preview-repo/02-components/actions/button.html
+++ b/docs/chore/cleanup-preview-repo/02-components/actions/button.html
@@ -111,4 +111,4 @@ <h2 class="flow--heading flow--heading--h2">Inverse</h2>
 <div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl LiveCodeEditor_inverse__k0tjd" style="zoom:1"><button type="button" class="flow--button flow--button--inverse flow--button--primary flow--button--solid" data-rac=""><span class="flow--button--content"><span class="flow--button--text">Fortfahren/Aktion</span></span></button></div><div class="LiveCodeEditor_editorContainer__dsY4x"><div class="LiveCodeEditor_editor__KuUVR LiveCodeEditor_collapsed__bp_8l"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#000000;background-color:#ffffff" spellCheck="false"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Button</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@mittwald/flow-react-components/Button&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span>
 </span><span class="token-line" style="color:#000000">
 </span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">inverse</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Fortfahren/Aktion</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/actions/button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/actions/button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"actions\\\",\\\"button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/button\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:Tdec,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    p: \"p\",\n    code: \"code\",\n    hr: \"hr\",\n    h3: \"h3\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Benutze das \", _jsx(_components.code, {\n        children: \"onPress\"\n      }), \" Property um die Interaktion mit Maus, Keyboard oder Touch\\nzu ermöglichen.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Verschiedene Farbvarianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"colors\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Plain Variante\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"plain\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Soft Variante\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"soft\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Benutze die \", _jsx(_components.code, {\n        children: \"\u003cIcon /\u003e\"\n      }), \" Komponente in einem \", _jsx(_components.code, {\n        children: \"\u003cButton /\u003e\"\n      }), \" um ein Icon\\ndarzustellen.\"]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Accessibility\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Das enthaltene SVG erhält automatisch das \", _jsx(_components.code, {\n        children: \"aria-hidden=true\"\n      }), \" Attribut. Wenn dein\\nButton keinen Text enthält, benutze das \", _jsx(_components.code, {\n        children: \"aria-label\"\n      }), \" Attribut um die hinterlegte\\nAktion zu beschreiben.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icon\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon und Text\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"iconText\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Small Variante\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"small\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"States\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"states\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Inverse\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inverse\",\n      inverse: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Button\"}],\"Der Button dient zum Ausführen von Aktionen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Button\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Button\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/actions/button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/actions/button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"actions\\\",\\\"button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/button\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:Tdec,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    p: \"p\",\n    code: \"code\",\n    hr: \"hr\",\n    h3: \"h3\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Benutze das \", _jsx(_components.code, {\n        children: \"onPress\"\n      }), \" Property um die Interaktion mit Maus, Keyboard oder Touch\\nzu ermöglichen.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Verschiedene Farbvarianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"colors\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Plain Variante\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"plain\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Soft Variante\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"soft\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Benutze die \", _jsx(_components.code, {\n        children: \"\u003cIcon /\u003e\"\n      }), \" Komponente in einem \", _jsx(_components.code, {\n        children: \"\u003cButton /\u003e\"\n      }), \" um ein Icon\\ndarzustellen.\"]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Accessibility\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Das enthaltene SVG erhält automatisch das \", _jsx(_components.code, {\n        children: \"aria-hidden=true\"\n      }), \" Attribut. Wenn dein\\nButton keinen Text enthält, benutze das \", _jsx(_components.code, {\n        children: \"aria-label\"\n      }), \" Attribut um die hinterlegte\\nAktion zu beschreiben.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icon\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon und Text\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"iconText\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Small Variante\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"small\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"States\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"states\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Inverse\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inverse\",\n      inverse: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Button\"}],\"Der Button dient zum Ausführen von Aktionen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Button\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Button\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/actions/button.txt b/docs/chore/cleanup-preview-repo/02-components/actions/button.txt
index 7a33543c8e..96a22d191a 100644
--- a/docs/chore/cleanup-preview-repo/02-components/actions/button.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/actions/button.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/actions/button","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/actions/button","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"actions\",\"button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/actions/button","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/actions/button","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"actions\",\"button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/actions/button","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/actions/context-menu.html b/docs/chore/cleanup-preview-repo/02-components/actions/context-menu.html
index 9281cb7841..d38fa69803 100644
--- a/docs/chore/cleanup-preview-repo/02-components/actions/context-menu.html
+++ b/docs/chore/cleanup-preview-repo/02-components/actions/context-menu.html
@@ -92,4 +92,4 @@ <h2 class="flow--heading flow--heading--h2">Mit Icon</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">MenuItem</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">ContextMenu</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">ContextMenuTrigger</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/actions/context-menu\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/actions/context-menu\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/context-menu\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"actions\\\",\\\"context-menu\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/context-menu\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T679,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Einfach-Auswahl\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"single-select\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mehrfach-Auswahl\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multi-select\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icon\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ContextMenu\"}],\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextMenu\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"ContextMenu\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/actions/context-menu\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/actions/context-menu\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/context-menu\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"actions\\\",\\\"context-menu\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/context-menu\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T679,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Einfach-Auswahl\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"single-select\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mehrfach-Auswahl\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multi-select\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icon\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ContextMenu\"}],\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextMenu\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"ContextMenu\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/actions/context-menu.txt b/docs/chore/cleanup-preview-repo/02-components/actions/context-menu.txt
index ce704db22d..77a01d93dd 100644
--- a/docs/chore/cleanup-preview-repo/02-components/actions/context-menu.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/actions/context-menu.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/actions/context-menu","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/actions/context-menu","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"actions\",\"context-menu\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/actions/context-menu","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/actions/context-menu","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"actions\",\"context-menu\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/actions/context-menu","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/actions/copy-button.html b/docs/chore/cleanup-preview-repo/02-components/actions/copy-button.html
index 8fae1d8c5d..4bf100d83b 100644
--- a/docs/chore/cleanup-preview-repo/02-components/actions/copy-button.html
+++ b/docs/chore/cleanup-preview-repo/02-components/actions/copy-button.html
@@ -5,4 +5,4 @@
 <div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" aria-label="Copy" class="flow--button flow--button--primary flow--button--solid" data-rac=""><span class="flow--button--content"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-copy flow--icon flow--button--icon flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z"></path><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"></path></svg></span></button></div><div class="LiveCodeEditor_editorContainer__dsY4x"><div class="LiveCodeEditor_editor__KuUVR"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#000000;background-color:#ffffff" spellCheck="false"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">CopyButton</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@mittwald/flow-react-components/CopyButton&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span>
 </span><span class="token-line" style="color:#000000">
 </span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">CopyButton</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">text</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">Kopierter Inhalt</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/actions/copy-button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/actions/copy-button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/copy-button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"actions\\\",\\\"copy-button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/copy-button\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CopyButton\"}],\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CopyButton\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"CopyButton\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/actions/copy-button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/actions/copy-button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/copy-button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"actions\\\",\\\"copy-button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/actions/copy-button\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CopyButton\"}],\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CopyButton\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"CopyButton\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/actions/copy-button.txt b/docs/chore/cleanup-preview-repo/02-components/actions/copy-button.txt
index 2a33dc5a59..adc744c2ec 100644
--- a/docs/chore/cleanup-preview-repo/02-components/actions/copy-button.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/actions/copy-button.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/actions/copy-button","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/actions/copy-button","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"actions\",\"copy-button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/actions/copy-button","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/actions/copy-button","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"actions\",\"copy-button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/actions/copy-button","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/avatar.html b/docs/chore/cleanup-preview-repo/02-components/content/avatar.html
index 8bab34c7ba..ce10a3df94 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/avatar.html
+++ b/docs/chore/cleanup-preview-repo/02-components/content/avatar.html
@@ -84,4 +84,4 @@ <h2 class="flow--heading flow--heading--h2">Farbvarianten</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">IconCustomer</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Avatar</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Row</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/avatar\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/avatar\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/avatar\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"avatar\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/avatar\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:Tb69,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    p: \"p\",\n    code: \"code\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Mit Initialen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Initialen werden automatisch aus dem Text generiert, welcher der\\n\", _jsx(_components.code, {\n        children: \"\u003cInitials /\u003e\"\n      }), \" Komponente mitgegeben wird.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Bild\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Benutze ein \", _jsx(_components.code, {\n        children: \"\u003cImage /\u003e\"\n      }), \" im \", _jsx(_components.code, {\n        children: \"\u003cAvatar /\u003e\"\n      }), \" um ein Profilbild anzuzeigen.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"image\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Ein \", _jsx(_components.code, {\n        children: \"\u003cIcon /\u003e\"\n      }), \" kann innerhalb eines \", _jsx(_components.code, {\n        children: \"\u003cAvatar /\u003e\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icon\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Größen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"sizes\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Farbvarianten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Farbe hängt von den jeweiligen Children der Komponente ab, kann aber über\\ndas Property \", _jsx(_components.code, {\n        children: \"variant\"\n      }), \" überschrieben werden um eine bestimmte Farbvariante zu\\nerhalten. Sie dient dazu für Abwechslung in den angezeigten Avataren zu sorgen.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"colors\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Avatar\"}],\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Avatar\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Avatar\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/avatar\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/avatar\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/avatar\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"avatar\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/avatar\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:Tb69,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    p: \"p\",\n    code: \"code\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Mit Initialen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Initialen werden automatisch aus dem Text generiert, welcher der\\n\", _jsx(_components.code, {\n        children: \"\u003cInitials /\u003e\"\n      }), \" Komponente mitgegeben wird.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Bild\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Benutze ein \", _jsx(_components.code, {\n        children: \"\u003cImage /\u003e\"\n      }), \" im \", _jsx(_components.code, {\n        children: \"\u003cAvatar /\u003e\"\n      }), \" um ein Profilbild anzuzeigen.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"image\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Ein \", _jsx(_components.code, {\n        children: \"\u003cIcon /\u003e\"\n      }), \" kann innerhalb eines \", _jsx(_components.code, {\n        children: \"\u003cAvatar /\u003e\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icon\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Größen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"sizes\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Farbvarianten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Farbe hängt von den jeweiligen Children der Komponente ab, kann aber über\\ndas Property \", _jsx(_components.code, {\n        children: \"variant\"\n      }), \" überschrieben werden um eine bestimmte Farbvariante zu\\nerhalten. Sie dient dazu für Abwechslung in den angezeigten Avataren zu sorgen.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"colors\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Avatar\"}],\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Avatar\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Avatar\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/avatar.txt b/docs/chore/cleanup-preview-repo/02-components/content/avatar.txt
index 42184c2ef0..6a47fe0600 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/avatar.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/content/avatar.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/content/avatar","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/content/avatar","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"avatar\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/avatar","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/content/avatar","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"avatar\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/avatar","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/heading.html b/docs/chore/cleanup-preview-repo/02-components/content/heading.html
index dd0bde654e..abc165dd84 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/heading.html
+++ b/docs/chore/cleanup-preview-repo/02-components/content/heading.html
@@ -48,4 +48,4 @@ <h2 class="flow--heading flow--heading--h2">Mit Icon</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">IconMember</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  Persönliche Informationen</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Heading</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/heading\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/heading\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/heading\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"heading\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/heading\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T772,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Level\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"levels\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Optisches Level\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Über das Property \", _jsx(_components.code, {\n        children: \"levelVisual\"\n      }), \" kann die Heading so verändert werden, dass sie\\noptisch einem anderen Level entspricht.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"level-visual\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icon\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Heading\"}],\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Heading\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Heading\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/heading\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/heading\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/heading\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"heading\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/heading\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T772,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Level\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"levels\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Optisches Level\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Über das Property \", _jsx(_components.code, {\n        children: \"levelVisual\"\n      }), \" kann die Heading so verändert werden, dass sie\\noptisch einem anderen Level entspricht.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"level-visual\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icon\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Heading\"}],\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Heading\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Heading\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/heading.txt b/docs/chore/cleanup-preview-repo/02-components/content/heading.txt
index 96822df999..7c34bbfac6 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/heading.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/content/heading.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/content/heading","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/content/heading","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"heading\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/heading","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/content/heading","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"heading\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/heading","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/icon.html b/docs/chore/cleanup-preview-repo/02-components/content/icon.html
index 825e4d9a7e..756dae6925 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/icon.html
+++ b/docs/chore/cleanup-preview-repo/02-components/content/icon.html
@@ -406,4 +406,4 @@ <h3 class="flow--heading flow--heading--h3">Status</h3>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">IconWarning</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">LabeledValue</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">ColumnLayout</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/icon\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/icon\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/icon\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"icon\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/icon\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14b:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"148:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"14c:Ta98,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    h3: \"h3\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Tabler Icon\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"tabler\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit SVG\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"svg\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit SVG string\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"svg-string\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Farben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn das SVG Farben unterstützt, kann es per CSS eingefärbt werden.\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"coloring\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Größen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"sizes\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Verfügbare Icons\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Descriptive\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"descriptive\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Functional\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"functional\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"states\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14d:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"14e:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Icon\"}],\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Icon\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$147\",\"functional\":\"$148\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":[[\"$\",\"$L14b\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14c\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$14d\",\"functional\":\"$14e\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Icon\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/icon\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/icon\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/icon\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"icon\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/icon\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14b:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"148:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"14c:Ta98,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    h3: \"h3\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Tabler Icon\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"tabler\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit SVG\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"svg\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit SVG string\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"svg-string\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Farben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn das SVG Farben unterstützt, kann es per CSS eingefärbt werden.\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"coloring\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Größen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"sizes\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Verfügbare Icons\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Descriptive\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"descriptive\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Functional\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"functional\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"states\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14d:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"14e:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Icon\"}],\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Icon\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$147\",\"functional\":\"$148\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":[[\"$\",\"$L14b\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14c\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$14d\",\"functional\":\"$14e\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Icon\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/icon.txt b/docs/chore/cleanup-preview-repo/02-components/content/icon.txt
index 36eb69c269..1d215f78f0 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/icon.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/content/icon.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/content/icon","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/content/icon","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"icon\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/icon","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/content/icon","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"icon\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/icon","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/illustrated-message.html b/docs/chore/cleanup-preview-repo/02-components/content/illustrated-message.html
index ef5b305ed6..76ce6ea749 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/illustrated-message.html
+++ b/docs/chore/cleanup-preview-repo/02-components/content/illustrated-message.html
@@ -35,4 +35,4 @@ <h2 class="flow--heading flow--heading--h2">Negative Variante</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Text</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Zum Dashboard</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">IllustratedMessage</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/illustrated-message\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/illustrated-message\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/illustrated-message\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"illustrated-message\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/illustrated-message\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T4f6,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Negative Variante\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"negative\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"IllustratedMessage\"}],\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/IllustratedMessage\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"IllustratedMessage\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/illustrated-message\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/illustrated-message\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/illustrated-message\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"illustrated-message\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/illustrated-message\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T4f6,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Negative Variante\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"negative\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"IllustratedMessage\"}],\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/IllustratedMessage\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"IllustratedMessage\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/illustrated-message.txt b/docs/chore/cleanup-preview-repo/02-components/content/illustrated-message.txt
index 41f8ea6fc7..d3846af025 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/illustrated-message.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/content/illustrated-message.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/content/illustrated-message","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/content/illustrated-message","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"illustrated-message\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/illustrated-message","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/content/illustrated-message","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"illustrated-message\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/illustrated-message","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/image.html b/docs/chore/cleanup-preview-repo/02-components/content/image.html
index 9554635085..d08feb5872 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/image.html
+++ b/docs/chore/cleanup-preview-repo/02-components/content/image.html
@@ -9,4 +9,4 @@
 </span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)">  </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">alt</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">Gopher</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"></span>
 </span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)">  </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">200</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag" style="color:rgb(128, 0, 0)"></span>
 </span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/image\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/image\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/image\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"image\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/image\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Image\"}],\"Mit der Image-Komponente können Bilder angezeigt werden.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Image\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Image\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/image\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/image\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/image\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"image\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/image\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Image\"}],\"Mit der Image-Komponente können Bilder angezeigt werden.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Image\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Image\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/image.txt b/docs/chore/cleanup-preview-repo/02-components/content/image.txt
index f1886b8521..5d8dfd7b13 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/image.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/content/image.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/content/image","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/content/image","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"image\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/image","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/content/image","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"image\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/image","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/inline-code.html b/docs/chore/cleanup-preview-repo/02-components/content/inline-code.html
index f0f36d4777..23b145f394 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/inline-code.html
+++ b/docs/chore/cleanup-preview-repo/02-components/content/inline-code.html
@@ -9,4 +9,4 @@
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  Gib </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">InlineCode</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">yarn start</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">InlineCode</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"> ein um deine App</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  zu starten.</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Text</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/inline-code\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/inline-code\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/inline-code\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"inline-code\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/inline-code\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"InlineCode\"}],\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineCode\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"InlineCode\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/inline-code\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/inline-code\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/inline-code\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"inline-code\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/inline-code\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"InlineCode\"}],\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineCode\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"InlineCode\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/inline-code.txt b/docs/chore/cleanup-preview-repo/02-components/content/inline-code.txt
index 270725f547..a8d35a0db0 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/inline-code.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/content/inline-code.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/content/inline-code","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/content/inline-code","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"inline-code\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/inline-code","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/content/inline-code","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"inline-code\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/inline-code","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/label.html b/docs/chore/cleanup-preview-repo/02-components/content/label.html
index f11e11cf58..1c9243c131 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/label.html
+++ b/docs/chore/cleanup-preview-repo/02-components/content/label.html
@@ -5,4 +5,4 @@
 <div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><label class="flow--label">Das ist ein Label</label></div><div class="LiveCodeEditor_editorContainer__dsY4x"><div class="LiveCodeEditor_editor__KuUVR"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#000000;background-color:#ffffff" spellCheck="false"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Label</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@mittwald/flow-react-components/Label&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span>
 </span><span class="token-line" style="color:#000000">
 </span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Das ist ein Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/label\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/label\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/label\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"label\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/label\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Label\"}],\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Label\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Label\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/label\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/label\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/label\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"label\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/label\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Label\"}],\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Label\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Label\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/label.txt b/docs/chore/cleanup-preview-repo/02-components/content/label.txt
index 22f21bdab3..ed8b691580 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/label.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/content/label.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/content/label","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/content/label","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"label\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/label","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/content/label","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"label\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/label","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/labeled-value.html b/docs/chore/cleanup-preview-repo/02-components/content/labeled-value.html
index e2dab17975..36a5400094 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/labeled-value.html
+++ b/docs/chore/cleanup-preview-repo/02-components/content/labeled-value.html
@@ -47,4 +47,4 @@ <h2 class="flow--heading flow--heading--h2">Mit InlineCode</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">InlineCode</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">127.0.0.1</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">InlineCode</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">CopyButton</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">text</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">127.0.0.1</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">LabeledValue</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/labeled-value\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/labeled-value\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/labeled-value\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"labeled-value\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/labeled-value\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T673,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit CopyButton\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"copy-button\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Link\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"link\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit InlineCode\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inline-code\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LabeledValue\"}],\"Ein LabeledValue zeigt eine Information mit einem Label an.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LabeledValue\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"LabeledValue\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/labeled-value\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/labeled-value\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/labeled-value\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"labeled-value\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/labeled-value\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T673,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit CopyButton\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"copy-button\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Link\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"link\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit InlineCode\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inline-code\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LabeledValue\"}],\"Ein LabeledValue zeigt eine Information mit einem Label an.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LabeledValue\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"LabeledValue\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/labeled-value.txt b/docs/chore/cleanup-preview-repo/02-components/content/labeled-value.txt
index c89d13b22d..c6474072ac 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/labeled-value.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/content/labeled-value.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/content/labeled-value","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/content/labeled-value","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"labeled-value\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/labeled-value","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/content/labeled-value","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"labeled-value\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/labeled-value","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/skeleton.html b/docs/chore/cleanup-preview-repo/02-components/content/skeleton.html
index ad8661695d..60e3385796 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/skeleton.html
+++ b/docs/chore/cleanup-preview-repo/02-components/content/skeleton.html
@@ -29,4 +29,4 @@ <h2 class="flow--heading flow--heading--h2">Accessibility</h2>
 <p>Um für den Screenreader erkenntlich zu machen, dass ein Inhalt fertig geladen
 hat sollte dieser im Ladezustand das Property <code class="customComponents_code__kzJRU">aria-busy</code>, welches auf <code class="customComponents_code__kzJRU">false</code>
 gesetzt wird, wenn fertig geladen wurde. (s.
-<a class="flow--link flow--link--inline" href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy">MDN</a>)</p></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/skeleton\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/skeleton\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/skeleton\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"skeleton\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/skeleton\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T95f,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\",\n    strong: \"strong\",\n    a: \"a\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Benutzerdefinierte Größe\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"custom-size\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Accessibility\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Das Skeleton soll von Screenreadern ignoriert werden und enthält deswegen das\\nProperty \", _jsx(_components.code, {\n        children: \"aria-hidden\"\n      }), \".\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Accessibility eines Ladezustands wird \", _jsx(_components.strong, {\n        children: \"nicht\"\n      }), \" vom Skeleton geregelt.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Um für den Screenreader erkenntlich zu machen, dass ein Inhalt fertig geladen\\nhat sollte dieser im Ladezustand das Property \", _jsx(_components.code, {\n        children: \"aria-busy\"\n      }), \", welches auf \", _jsx(_components.code, {\n        children: \"false\"\n      }), \"\\ngesetzt wird, wenn fertig geladen wurde. (s.\\n\", _jsx(_components.a, {\n        href: \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy\",\n        children: \"MDN\"\n      }), \")\"]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Skeleton\"}],\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Skeleton\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Skeleton\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+<a class="flow--link flow--link--inline" href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy">MDN</a>)</p></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/skeleton\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/skeleton\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/skeleton\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"skeleton\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/skeleton\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T95f,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\",\n    strong: \"strong\",\n    a: \"a\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Benutzerdefinierte Größe\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"custom-size\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Accessibility\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Das Skeleton soll von Screenreadern ignoriert werden und enthält deswegen das\\nProperty \", _jsx(_components.code, {\n        children: \"aria-hidden\"\n      }), \".\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Accessibility eines Ladezustands wird \", _jsx(_components.strong, {\n        children: \"nicht\"\n      }), \" vom Skeleton geregelt.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Um für den Screenreader erkenntlich zu machen, dass ein Inhalt fertig geladen\\nhat sollte dieser im Ladezustand das Property \", _jsx(_components.code, {\n        children: \"aria-busy\"\n      }), \", welches auf \", _jsx(_components.code, {\n        children: \"false\"\n      }), \"\\ngesetzt wird, wenn fertig geladen wurde. (s.\\n\", _jsx(_components.a, {\n        href: \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy\",\n        children: \"MDN\"\n      }), \")\"]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Skeleton\"}],\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Skeleton\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Skeleton\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/skeleton.txt b/docs/chore/cleanup-preview-repo/02-components/content/skeleton.txt
index 742374d70e..c907d7b5bf 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/skeleton.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/content/skeleton.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/content/skeleton","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/content/skeleton","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"skeleton\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/skeleton","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/content/skeleton","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"skeleton\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/skeleton","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/text.html b/docs/chore/cleanup-preview-repo/02-components/content/text.html
index 90c212f017..b5034c3d66 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/text.html
+++ b/docs/chore/cleanup-preview-repo/02-components/content/text.html
@@ -25,4 +25,4 @@ <h2 class="flow--heading flow--heading--h2">Mit emulateBoldWidth</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag" style="color:rgb(128, 0, 0)">strong</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Das ist ein Text</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">strong</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Text</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Column</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/text\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/text\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/text\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"text\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/text\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T72a,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit emulateBoldWidth\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Benutze das \", _jsx(_components.code, {\n        children: \"emulateBoldWidth\"\n      }), \" Property, wenn dein Text immer die Breite haben\\nsoll, die er mit \", _jsx(_components.code, {\n        children: \"font-weight: bold\"\n      }), \" haben würde. Das ist beispielsweise in\\nhorizontalen Navigationen wichtig, wenn der aktive Menüpunkt \", _jsx(_components.code, {\n        children: \"bold\"\n      }), \" dargestellt\\nwird, um ein springen der Menüpunkte zu vermeiden.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"emulateBoldWidth\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Text\"}],\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Text\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Text\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/content/text\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/content/text\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/content/text\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"content\\\",\\\"text\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/content/text\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T72a,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit emulateBoldWidth\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Benutze das \", _jsx(_components.code, {\n        children: \"emulateBoldWidth\"\n      }), \" Property, wenn dein Text immer die Breite haben\\nsoll, die er mit \", _jsx(_components.code, {\n        children: \"font-weight: bold\"\n      }), \" haben würde. Das ist beispielsweise in\\nhorizontalen Navigationen wichtig, wenn der aktive Menüpunkt \", _jsx(_components.code, {\n        children: \"bold\"\n      }), \" dargestellt\\nwird, um ein springen der Menüpunkte zu vermeiden.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"emulateBoldWidth\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Text\"}],\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Text\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Text\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/content/text.txt b/docs/chore/cleanup-preview-repo/02-components/content/text.txt
index 2994ddf9b1..38234f157c 100644
--- a/docs/chore/cleanup-preview-repo/02-components/content/text.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/content/text.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/content/text","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/content/text","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"text\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/text","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/content/text","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"text\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/text","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-button.html b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-button.html
index c80d4071d1..9fa98043ac 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-button.html
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-button.html
@@ -8,4 +8,4 @@
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  Ich stimme den AGBs zu und bestätige, dass ich die</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  Datenschutzhinweise zur Kenntnis genommen habe.</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">CheckboxButton</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/checkbox-button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/checkbox-button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox-button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"checkbox-button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox-button\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CheckboxButton\"}],\"Der CheckboxButton verhält sich wie eine Checkbox.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxButton\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"CheckboxButton\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/checkbox-button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/checkbox-button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox-button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"checkbox-button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox-button\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CheckboxButton\"}],\"Der CheckboxButton verhält sich wie eine Checkbox.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxButton\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"CheckboxButton\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-button.txt b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-button.txt
index abfa02994f..4ed809e30e 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-button.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-button.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/form-controls/checkbox-button","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/form-controls/checkbox-button","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"checkbox-button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/checkbox-button","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/form-controls/checkbox-button","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"checkbox-button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/checkbox-button","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-group.html b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-group.html
index 3c69cb7663..981cf21780 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-group.html
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-group.html
@@ -37,4 +37,4 @@ <h2 class="flow--heading flow--heading--h2">Mit benutzerdefinierten Spalten</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">CheckboxButton</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">read</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Lesen</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">CheckboxButton</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">CheckboxButton</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">write</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Schreiben</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">CheckboxButton</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">CheckboxGroup</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/checkbox-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/checkbox-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"checkbox-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox-group\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T6fc,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Checkbox Buttons\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"buttons\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit benutzerdefinierten Spalten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die \", _jsx(_components.code, {\n        children: \"CheckboxGroup\"\n      }), \" verwendet das \", _jsx(_components.code, {\n        children: \"ColumnLayout\"\n      }), \" um eine Anpassung der Spalten\\nzu ermöglichen.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"customColumns\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CheckboxGroup\"}],\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxGroup\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"CheckboxGroup\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/checkbox-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/checkbox-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"checkbox-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox-group\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T6fc,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Checkbox Buttons\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"buttons\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit benutzerdefinierten Spalten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die \", _jsx(_components.code, {\n        children: \"CheckboxGroup\"\n      }), \" verwendet das \", _jsx(_components.code, {\n        children: \"ColumnLayout\"\n      }), \" um eine Anpassung der Spalten\\nzu ermöglichen.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"customColumns\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CheckboxGroup\"}],\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxGroup\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"CheckboxGroup\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-group.txt b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-group.txt
index 3667b38955..6b5b9594f7 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-group.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox-group.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/form-controls/checkbox-group","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/form-controls/checkbox-group","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"checkbox-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/checkbox-group","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/form-controls/checkbox-group","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"checkbox-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/checkbox-group","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox.html b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox.html
index 10c7872311..3d96cde5e1 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox.html
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox.html
@@ -26,4 +26,4 @@ <h2 class="flow--heading flow--heading--h2">Indeterminated</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  Ich stimme den AGBs zu und bestätige, dass ich die</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  Datenschutzhinweise zur Kenntnis genommen habe.</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Checkbox</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/checkbox\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/checkbox\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"checkbox\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T5b5,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Indeterminated\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"indeterminated\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Checkbox\"}],\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Checkbox\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Checkbox\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/checkbox\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/checkbox\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"checkbox\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/checkbox\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T5b5,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Indeterminated\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"indeterminated\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Checkbox\"}],\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Checkbox\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Checkbox\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox.txt b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox.txt
index 2b2a4332e5..4279e4b1b8 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/checkbox.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/form-controls/checkbox","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/form-controls/checkbox","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"checkbox\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/checkbox","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/form-controls/checkbox","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"checkbox\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/checkbox","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/number-field.html b/docs/chore/cleanup-preview-repo/02-components/form-controls/number-field.html
index 0b60b1e0bf..b69575465c 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/number-field.html
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/number-field.html
@@ -54,4 +54,4 @@ <h2 class="flow--heading flow--heading--h2">Mit Einheit</h2>
 </span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Speicherplatz</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">NumberField</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/number-field\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/number-field\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/number-field\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"number-field\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/number-field\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T71e,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Required\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"required\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Invalid\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"invalid\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Einheit\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"unit\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"NumberField\"}],\"Das NumberField dient der Eingabe von Zahlen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/NumberField\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"NumberField\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/number-field\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/number-field\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/number-field\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"number-field\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/number-field\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T71e,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Required\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"required\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Invalid\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"invalid\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Einheit\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"unit\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"NumberField\"}],\"Das NumberField dient der Eingabe von Zahlen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/NumberField\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"NumberField\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/number-field.txt b/docs/chore/cleanup-preview-repo/02-components/form-controls/number-field.txt
index 18091ab32f..b2a14bca5a 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/number-field.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/number-field.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/form-controls/number-field","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/form-controls/number-field","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"number-field\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/number-field","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/form-controls/number-field","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"number-field\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/number-field","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/radio-group.html b/docs/chore/cleanup-preview-repo/02-components/form-controls/radio-group.html
index b587ebac8d..4fcff488c0 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/radio-group.html
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/radio-group.html
@@ -94,4 +94,4 @@ <h2 class="flow--heading flow--heading--h2">Segmented Variante</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Radio</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">member</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Mitglied</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Radio</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Radio</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">accountant</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Buchhalter</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Radio</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">RadioGroup</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/radio-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/radio-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/radio-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"radio-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/radio-group\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T876,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    h3: \"h3\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Radio Buttons\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"buttons\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Mit zusätzlichem Inhalt\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"content\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit benutzerdefinierten Spalten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die \", _jsx(_components.code, {\n        children: \"RadioGroup\"\n      }), \" verwendet das \", _jsx(_components.code, {\n        children: \"ColumnLayout\"\n      }), \" um eine Anpassung der Spalten zu\\nermöglichen.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"customColumns\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Segmented Variante\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"segmented\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"RadioGroup\"}],\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/RadioGroup\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"RadioGroup\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/radio-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/radio-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/radio-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"radio-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/radio-group\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T876,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    h3: \"h3\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Radio Buttons\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"buttons\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Mit zusätzlichem Inhalt\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"content\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit benutzerdefinierten Spalten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die \", _jsx(_components.code, {\n        children: \"RadioGroup\"\n      }), \" verwendet das \", _jsx(_components.code, {\n        children: \"ColumnLayout\"\n      }), \" um eine Anpassung der Spalten zu\\nermöglichen.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"customColumns\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Segmented Variante\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"segmented\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"RadioGroup\"}],\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/RadioGroup\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"RadioGroup\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/radio-group.txt b/docs/chore/cleanup-preview-repo/02-components/form-controls/radio-group.txt
index 2680ec1773..f863ad7219 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/radio-group.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/radio-group.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/form-controls/radio-group","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/form-controls/radio-group","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"radio-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/radio-group","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/form-controls/radio-group","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"radio-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/radio-group","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/select.html b/docs/chore/cleanup-preview-repo/02-components/form-controls/select.html
index 28f48e9134..0dff186bb8 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/select.html
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/select.html
@@ -16,4 +16,4 @@
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Option</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Joomla!</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Option</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Option</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Matomo</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Option</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Select</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/select\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/select\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/select\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"select\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/select\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Select\"}],\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Select\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Select\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/select\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/select\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/select\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"select\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/select\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Select\"}],\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Select\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Select\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/select.txt b/docs/chore/cleanup-preview-repo/02-components/form-controls/select.txt
index fa7fbe7570..dd4a74512e 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/select.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/select.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/form-controls/select","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/form-controls/select","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"select\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/select","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/form-controls/select","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"select\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/select","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/switch.html b/docs/chore/cleanup-preview-repo/02-components/form-controls/switch.html
index 59c72203c2..ead51ac037 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/switch.html
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/switch.html
@@ -17,4 +17,4 @@ <h2 class="flow--heading flow--heading--h2">Disabled</h2>
 <div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><label class="flow--switch" data-rac="" data-disabled="true"><span style="border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap"><input disabled="" type="checkbox" role="switch"/></span><div class="flow--switch--track"><div class="flow--switch--handle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-x flow--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M18 6l-12 12"></path><path d="M6 6l12 12"></path></svg></div></div><label class="flow--label flow--switch--label">Autoresponder</label></label></div><div class="LiveCodeEditor_editorContainer__dsY4x"><div class="LiveCodeEditor_editor__KuUVR LiveCodeEditor_collapsed__bp_8l"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#000000;background-color:#ffffff" spellCheck="false"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Switch</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@mittwald/flow-react-components/Switch&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span>
 </span><span class="token-line" style="color:#000000">
 </span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Switch</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">isDisabled</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Autoresponder</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Switch</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/switch\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/switch\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/switch\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"switch\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/switch\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T5b5,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Label vorne\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"leading-label\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Switch\"}],\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Switch\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Switch\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/switch\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/switch\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/switch\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"switch\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/switch\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T5b5,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Label vorne\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"leading-label\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Switch\"}],\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Switch\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Switch\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/switch.txt b/docs/chore/cleanup-preview-repo/02-components/form-controls/switch.txt
index da148e6478..5e90efdd18 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/switch.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/switch.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/form-controls/switch","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/form-controls/switch","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"switch\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/switch","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/form-controls/switch","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"switch\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/switch","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/text-area.html b/docs/chore/cleanup-preview-repo/02-components/form-controls/text-area.html
index f1e40f9130..bf37cd6820 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/text-area.html
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/text-area.html
@@ -39,4 +39,4 @@ <h2 class="flow--heading flow--heading--h2">Invalid</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Public Key</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">FieldError</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Ungültiger Key</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">FieldError</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">TextArea</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/text-area\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/text-area\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/text-area\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"text-area\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/text-area\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T663,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Required\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"required\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Invalid\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"invalid\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"TextArea\"}],\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextArea\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"TextArea\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/text-area\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/text-area\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/text-area\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"text-area\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/text-area\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T663,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Required\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"required\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Invalid\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"invalid\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"TextArea\"}],\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextArea\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"TextArea\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/text-area.txt b/docs/chore/cleanup-preview-repo/02-components/form-controls/text-area.txt
index 50a6c45c4d..fd5b4b7598 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/text-area.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/text-area.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/form-controls/text-area","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/form-controls/text-area","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"text-area\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/text-area","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/form-controls/text-area","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"text-area\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/text-area","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/text-field.html b/docs/chore/cleanup-preview-repo/02-components/form-controls/text-field.html
index 8296b88e96..7e7bfde833 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/text-field.html
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/text-field.html
@@ -39,4 +39,4 @@ <h2 class="flow--heading flow--heading--h2">Invalid</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">URL</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">FieldError</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Das ist keine URL</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">FieldError</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">TextField</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/text-field\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/text-field\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/text-field\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"text-field\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/text-field\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T663,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Required\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"required\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Invalid\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"invalid\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"TextField\"}],\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextField\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"TextField\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/form-controls/text-field\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/form-controls/text-field\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/text-field\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"form-controls\\\",\\\"text-field\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/form-controls/text-field\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T663,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Required\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"required\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Invalid\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"invalid\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"TextField\"}],\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextField\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"TextField\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/form-controls/text-field.txt b/docs/chore/cleanup-preview-repo/02-components/form-controls/text-field.txt
index 2e26d3f941..26f51f66b2 100644
--- a/docs/chore/cleanup-preview-repo/02-components/form-controls/text-field.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/form-controls/text-field.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/form-controls/text-field","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/form-controls/text-field","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"text-field\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/text-field","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/form-controls/text-field","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"form-controls\",\"text-field\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/form-controls/text-field","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/navigation/breadcrumb.html b/docs/chore/cleanup-preview-repo/02-components/navigation/breadcrumb.html
index 04819a5fc1..a4cf26f2f4 100644
--- a/docs/chore/cleanup-preview-repo/02-components/navigation/breadcrumb.html
+++ b/docs/chore/cleanup-preview-repo/02-components/navigation/breadcrumb.html
@@ -21,4 +21,4 @@ <h2 class="flow--heading flow--heading--h2">Inverse</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Link</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">#</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Apps</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Link</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Link</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">#</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Meine App</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Link</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Breadcrumb</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/navigation/breadcrumb\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/navigation/breadcrumb\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/breadcrumb\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"navigation\\\",\\\"breadcrumb\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/breadcrumb\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T500,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Inverse\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inverse\",\n      inverse: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Breadcrumb\"}],\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Breadcrumb\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Breadcrumb\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/navigation/breadcrumb\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/navigation/breadcrumb\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/breadcrumb\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"navigation\\\",\\\"breadcrumb\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/breadcrumb\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T500,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Inverse\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inverse\",\n      inverse: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Breadcrumb\"}],\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Breadcrumb\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Breadcrumb\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/navigation/breadcrumb.txt b/docs/chore/cleanup-preview-repo/02-components/navigation/breadcrumb.txt
index b4b1d14a4a..49473449fc 100644
--- a/docs/chore/cleanup-preview-repo/02-components/navigation/breadcrumb.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/navigation/breadcrumb.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/navigation/breadcrumb","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/navigation/breadcrumb","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"navigation\",\"breadcrumb\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/navigation/breadcrumb","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/navigation/breadcrumb","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"navigation\",\"breadcrumb\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/navigation/breadcrumb","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/navigation/header-navigation.html b/docs/chore/cleanup-preview-repo/02-components/navigation/header-navigation.html
index d9a7add2cf..1f18ab5e30 100644
--- a/docs/chore/cleanup-preview-repo/02-components/navigation/header-navigation.html
+++ b/docs/chore/cleanup-preview-repo/02-components/navigation/header-navigation.html
@@ -84,4 +84,4 @@ <h2 class="flow--heading flow--heading--h2">Inverse</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">IconSearch</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">HeaderNavigation</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/navigation/header-navigation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/navigation/header-navigation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/header-navigation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"navigation\\\",\\\"header-navigation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/header-navigation\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n14b:T5d1,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Avatar und ContextMenu\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"contextMenu\",\n    "])</script><script>self.__next_f.push([1,"  editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Inverse\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inverse\",\n      inverse: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14c:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"HeaderNavigation\"}],\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/HeaderNavigation\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$147\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"contextMenu\":\"$14c\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"HeaderNavigation\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/navigation/header-navigation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/navigation/header-navigation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/header-navigation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"navigation\\\",\\\"header-navigation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/header-navigation\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n14b:T5d1,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Avatar und ContextMenu\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"contextMenu\",\n    "])</script><script>self.__next_f.push([1,"  editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Inverse\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inverse\",\n      inverse: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14c:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"HeaderNavigation\"}],\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/HeaderNavigation\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$147\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"contextMenu\":\"$14c\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"HeaderNavigation\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/navigation/header-navigation.txt b/docs/chore/cleanup-preview-repo/02-components/navigation/header-navigation.txt
index 925ec4fef1..addde0a36c 100644
--- a/docs/chore/cleanup-preview-repo/02-components/navigation/header-navigation.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/navigation/header-navigation.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/navigation/header-navigation","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/navigation/header-navigation","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"navigation\",\"header-navigation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/navigation/header-navigation","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/navigation/header-navigation","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"navigation\",\"header-navigation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/navigation/header-navigation","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/navigation/link.html b/docs/chore/cleanup-preview-repo/02-components/navigation/link.html
index 9cbe2fef2b..b9083c2837 100644
--- a/docs/chore/cleanup-preview-repo/02-components/navigation/link.html
+++ b/docs/chore/cleanup-preview-repo/02-components/navigation/link.html
@@ -35,4 +35,4 @@ <h2 class="flow--heading flow--heading--h2">Inline</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  Sieh dir unser </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Link</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">#</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Onboarding</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Link</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"> an um</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  weitere Informationen zu erhalten.</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Text</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/navigation/link\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/navigation/link\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/link\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"navigation\\\",\\\"link\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/link\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T7bb,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icon\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Inline\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Benutze das \", _jsx(_components.code, {\n        children: \"inline\"\n      }), \" Property wenn du den Link innerhalb eines Textblocks\\nbenutzen möchtest.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inline\",\n      editorCollapsed: true\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Links innerhalb der \", _jsx(_components.code, {\n        children: \"\u003cText /\u003e\"\n      }), \" Komponente werden automatisch als Inline Link\\ngerendert.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inlineText\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Link\"}],\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Link\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Link\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/navigation/link\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/navigation/link\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/link\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"navigation\\\",\\\"link\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/link\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T7bb,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    code: \"code\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icon\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icon\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Inline\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Benutze das \", _jsx(_components.code, {\n        children: \"inline\"\n      }), \" Property wenn du den Link innerhalb eines Textblocks\\nbenutzen möchtest.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inline\",\n      editorCollapsed: true\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Links innerhalb der \", _jsx(_components.code, {\n        children: \"\u003cText /\u003e\"\n      }), \" Komponente werden automatisch als Inline Link\\ngerendert.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inlineText\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Link\"}],\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Link\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Link\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/navigation/link.txt b/docs/chore/cleanup-preview-repo/02-components/navigation/link.txt
index 3f70e694d0..199ce79241 100644
--- a/docs/chore/cleanup-preview-repo/02-components/navigation/link.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/navigation/link.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/navigation/link","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/navigation/link","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"navigation\",\"link\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/navigation/link","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/navigation/link","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"navigation\",\"link\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/navigation/link","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/navigation/navigation.html b/docs/chore/cleanup-preview-repo/02-components/navigation/navigation.html
index 374fe448fd..82de271b34 100644
--- a/docs/chore/cleanup-preview-repo/02-components/navigation/navigation.html
+++ b/docs/chore/cleanup-preview-repo/02-components/navigation/navigation.html
@@ -87,4 +87,4 @@ <h2 class="flow--heading flow--heading--h2">Mit einklappbaren Gruppen</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Link</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">#</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Domains</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Link</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">NavigationGroup</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Navigation</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/navigation/navigation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/navigation/navigation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/navigation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"navigation\\\",\\\"navigation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/navigation\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T678,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icons\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icons\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Gruppen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"groups\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit einklappbaren Gruppen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"collapsable\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Navigation\"}],\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Navigation\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Navigation\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/navigation/navigation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/navigation/navigation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/navigation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"navigation\\\",\\\"navigation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/navigation\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T678,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Icons\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"icons\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Gruppen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"groups\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit einklappbaren Gruppen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"collapsable\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Navigation\"}],\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Navigation\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Navigation\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/navigation/navigation.txt b/docs/chore/cleanup-preview-repo/02-components/navigation/navigation.txt
index 7e67f1e600..6a6d4c69d5 100644
--- a/docs/chore/cleanup-preview-repo/02-components/navigation/navigation.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/navigation/navigation.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/navigation/navigation","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/navigation/navigation","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"navigation\",\"navigation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/navigation/navigation","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/navigation/navigation","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"navigation\",\"navigation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/navigation/navigation","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/navigation/tabs.html b/docs/chore/cleanup-preview-repo/02-components/navigation/tabs.html
index 7fcb08e41a..665487096c 100644
--- a/docs/chore/cleanup-preview-repo/02-components/navigation/tabs.html
+++ b/docs/chore/cleanup-preview-repo/02-components/navigation/tabs.html
@@ -102,4 +102,4 @@ <h2 class="flow--heading flow--heading--h2">Mit Status</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    Spamschutz Inhalt</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Tab</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Tabs</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/navigation/tabs\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/navigation/tabs\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/tabs\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"navigation\\\",\\\"tabs\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/tabs\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n14b:T585,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n "])</script><script>self.__next_f.push([1,"     example: \"content\"\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"Kollabierte Ansicht\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"collapsed\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14c:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSp"])</script><script>self.__next_f.push([1,"amschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Tabs\"}],\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tabs\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$147\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$14c\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Tabs\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/navigation/tabs\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/navigation/tabs\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/tabs\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"navigation\\\",\\\"tabs\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/navigation/tabs\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n14b:T585,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n "])</script><script>self.__next_f.push([1,"     example: \"content\"\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"Kollabierte Ansicht\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"collapsed\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14c:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSp"])</script><script>self.__next_f.push([1,"amschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Tabs\"}],\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tabs\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$147\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$14c\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Tabs\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/navigation/tabs.txt b/docs/chore/cleanup-preview-repo/02-components/navigation/tabs.txt
index 9036bd99c1..ca4da4af14 100644
--- a/docs/chore/cleanup-preview-repo/02-components/navigation/tabs.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/navigation/tabs.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/navigation/tabs","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/navigation/tabs","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"navigation\",\"tabs\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/navigation/tabs","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/navigation/tabs","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"navigation\",\"tabs\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/navigation/tabs","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/overlays/modal.html b/docs/chore/cleanup-preview-repo/02-components/overlays/modal.html
index 316385cdc9..dd760d4f41 100644
--- a/docs/chore/cleanup-preview-repo/02-components/overlays/modal.html
+++ b/docs/chore/cleanup-preview-repo/02-components/overlays/modal.html
@@ -77,4 +77,4 @@ <h2 class="flow--heading flow--heading--h2">Als OffCanvas</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">ButtonGroup</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Modal</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">OverlayTrigger</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/overlays/modal\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/overlays/modal\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/modal\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"overlays\\\",\\\"modal\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/modal\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14b:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n148:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButto"])</script><script>self.__next_f.push([1,"n color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n14c:T4f3,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Als OffCanvas\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"offCanvas\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14d:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\n"])</script><script>self.__next_f.push([1,"import Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n14e:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n "])</script><script>self.__next_f.push([1,"   \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Modal\"}],\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Modal\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$147\",\"offCanvas\":\"$148\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":[[\"$\",\"$L14b\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14c\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$14d\",\"offCanvas\":\"$14e\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Modal\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/overlays/modal\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/overlays/modal\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/modal\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"overlays\\\",\\\"modal\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/modal\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14b:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n148:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButto"])</script><script>self.__next_f.push([1,"n color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n14c:T4f3,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Als OffCanvas\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"offCanvas\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14d:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\n"])</script><script>self.__next_f.push([1,"import Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n14e:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n "])</script><script>self.__next_f.push([1,"   \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Modal\"}],\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Modal\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$147\",\"offCanvas\":\"$148\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":[[\"$\",\"$L14b\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14c\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$14d\",\"offCanvas\":\"$14e\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Modal\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/overlays/modal.txt b/docs/chore/cleanup-preview-repo/02-components/overlays/modal.txt
index 7dfdb22a33..4c407d2475 100644
--- a/docs/chore/cleanup-preview-repo/02-components/overlays/modal.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/overlays/modal.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/overlays/modal","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/overlays/modal","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"overlays\",\"modal\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/overlays/modal","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/overlays/modal","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"overlays\",\"modal\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/overlays/modal","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/overlays/off-canvas.html b/docs/chore/cleanup-preview-repo/02-components/overlays/off-canvas.html
index fa916f28dc..8bc2779f77 100644
--- a/docs/chore/cleanup-preview-repo/02-components/overlays/off-canvas.html
+++ b/docs/chore/cleanup-preview-repo/02-components/overlays/off-canvas.html
@@ -41,4 +41,4 @@
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Section</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">OffCanvas</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">OverlayTrigger</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/overlays/off-canvas\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/overlays/off-canvas\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/off-canvas\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"overlays\\\",\\\"off-canvas\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/off-canvas\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n14b:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxRe"])</script><script>self.__next_f.push([1,"ference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"OffCanvas\"}],\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/OffCanvas\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$147\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$14c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"OffCanvas\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/overlays/off-canvas\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/overlays/off-canvas\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/off-canvas\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"overlays\\\",\\\"off-canvas\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/off-canvas\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n14b:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxRe"])</script><script>self.__next_f.push([1,"ference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"OffCanvas\"}],\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/OffCanvas\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$147\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$14c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"OffCanvas\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/overlays/off-canvas.txt b/docs/chore/cleanup-preview-repo/02-components/overlays/off-canvas.txt
index bc5c4641e4..11c30fc12f 100644
--- a/docs/chore/cleanup-preview-repo/02-components/overlays/off-canvas.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/overlays/off-canvas.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/overlays/off-canvas","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/overlays/off-canvas","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"overlays\",\"off-canvas\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/overlays/off-canvas","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/overlays/off-canvas","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"overlays\",\"off-canvas\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/overlays/off-canvas","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/overlays/tooltip.html b/docs/chore/cleanup-preview-repo/02-components/overlays/tooltip.html
index ece05eaa02..889a9f318f 100644
--- a/docs/chore/cleanup-preview-repo/02-components/overlays/tooltip.html
+++ b/docs/chore/cleanup-preview-repo/02-components/overlays/tooltip.html
@@ -14,4 +14,4 @@
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Button</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Tooltip</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Speichern</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Tooltip</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">TooltipTrigger</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/overlays/tooltip\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/overlays/tooltip\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/tooltip\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"overlays\\\",\\\"tooltip\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/tooltip\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Tooltip\"}],\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tooltip\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Tooltip\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/overlays/tooltip\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/overlays/tooltip\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/tooltip\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"overlays\\\",\\\"tooltip\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/overlays/tooltip\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Tooltip\"}],\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tooltip\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Tooltip\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/overlays/tooltip.txt b/docs/chore/cleanup-preview-repo/02-components/overlays/tooltip.txt
index 5aca028762..a0938263eb 100644
--- a/docs/chore/cleanup-preview-repo/02-components/overlays/tooltip.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/overlays/tooltip.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/overlays/tooltip","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/overlays/tooltip","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"overlays\",\"tooltip\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/overlays/tooltip","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/overlays/tooltip","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"overlays\",\"tooltip\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/overlays/tooltip","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/status/inline-alert.html b/docs/chore/cleanup-preview-repo/02-components/status/inline-alert.html
index c6dfdd20a1..057cfee5ec 100644
--- a/docs/chore/cleanup-preview-repo/02-components/status/inline-alert.html
+++ b/docs/chore/cleanup-preview-repo/02-components/status/inline-alert.html
@@ -71,4 +71,4 @@ <h2 class="flow--heading flow--heading--h2">Status</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Content</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">InlineAlert</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Row</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/status/inline-alert\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/status/inline-alert\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/status/inline-alert\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"status\\\",\\\"inline-alert\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/status/inline-alert\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n14b:T5ab,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Inhalt\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"with-content\",\n      editorCo"])</script><script>self.__next_f.push([1,"llapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14c:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"InlineAlert\"}],\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineAlert\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$147\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$14c\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"InlineAlert\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/status/inline-alert\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/status/inline-alert\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/status/inline-alert\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"status\\\",\\\"inline-alert\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/status/inline-alert\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n14b:T5ab,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Inhalt\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"with-content\",\n      editorCo"])</script><script>self.__next_f.push([1,"llapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14c:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"InlineAlert\"}],\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineAlert\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$147\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$14c\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"InlineAlert\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/status/inline-alert.txt b/docs/chore/cleanup-preview-repo/02-components/status/inline-alert.txt
index 1015e25f78..f71ee525de 100644
--- a/docs/chore/cleanup-preview-repo/02-components/status/inline-alert.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/status/inline-alert.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/status/inline-alert","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/status/inline-alert","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"inline-alert\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/inline-alert","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/status/inline-alert","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"inline-alert\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/inline-alert","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/status/loading-spinner.html b/docs/chore/cleanup-preview-repo/02-components/status/loading-spinner.html
index e2f8367248..56cff5d238 100644
--- a/docs/chore/cleanup-preview-repo/02-components/status/loading-spinner.html
+++ b/docs/chore/cleanup-preview-repo/02-components/status/loading-spinner.html
@@ -5,4 +5,4 @@
 <div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-loader-2 flow--icon flow--loading-spinner flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M12 3a9 9 0 1 0 9 9"></path></svg></div><div class="LiveCodeEditor_editorContainer__dsY4x"><div class="LiveCodeEditor_editor__KuUVR"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#000000;background-color:#ffffff" spellCheck="false"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LoadingSpinner</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@mittwald/flow-react-components/LoadingSpinner&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span>
 </span><span class="token-line" style="color:#000000">
 </span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">LoadingSpinner</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/status/loading-spinner\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/status/loading-spinner\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/status/loading-spinner\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"status\\\",\\\"loading-spinner\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/status/loading-spinner\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LoadingSpinner\"}],\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LoadingSpinner\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"LoadingSpinner\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/status/loading-spinner\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/status/loading-spinner\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/status/loading-spinner\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"status\\\",\\\"loading-spinner\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/status/loading-spinner\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LoadingSpinner\"}],\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LoadingSpinner\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"LoadingSpinner\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/status/loading-spinner.txt b/docs/chore/cleanup-preview-repo/02-components/status/loading-spinner.txt
index 64d4f5cd53..1c1e0778f1 100644
--- a/docs/chore/cleanup-preview-repo/02-components/status/loading-spinner.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/status/loading-spinner.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/status/loading-spinner","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/status/loading-spinner","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"loading-spinner\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/loading-spinner","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/status/loading-spinner","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"loading-spinner\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/loading-spinner","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/status/progress-bar.html b/docs/chore/cleanup-preview-repo/02-components/status/progress-bar.html
index cf477cbbd0..69b2bdd612 100644
--- a/docs/chore/cleanup-preview-repo/02-components/status/progress-bar.html
+++ b/docs/chore/cleanup-preview-repo/02-components/status/progress-bar.html
@@ -51,4 +51,4 @@ <h2 class="flow--heading flow--heading--h2">Status</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    Danger</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">ProgressBar</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Row</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/status/progress-bar\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/status/progress-bar\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/status/progress-bar\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"status\\\",\\\"progress-bar\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/status/progress-bar\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T660,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Max Value\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"maxValue\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Small\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"small\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ProgressBar\"}],\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ProgressBar\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"ProgressBar\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/status/progress-bar\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/status/progress-bar\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/status/progress-bar\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"status\\\",\\\"progress-bar\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/status/progress-bar\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T660,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Max Value\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"maxValue\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Small\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"small\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ProgressBar\"}],\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ProgressBar\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"ProgressBar\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/status/progress-bar.txt b/docs/chore/cleanup-preview-repo/02-components/status/progress-bar.txt
index 872f32e130..703d6ed5f8 100644
--- a/docs/chore/cleanup-preview-repo/02-components/status/progress-bar.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/status/progress-bar.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/status/progress-bar","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/status/progress-bar","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"progress-bar\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/progress-bar","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/status/progress-bar","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"progress-bar\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/progress-bar","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/status/status-badge.html b/docs/chore/cleanup-preview-repo/02-components/status/status-badge.html
index d25de86042..58a00e12cf 100644
--- a/docs/chore/cleanup-preview-repo/02-components/status/status-badge.html
+++ b/docs/chore/cleanup-preview-repo/02-components/status/status-badge.html
@@ -20,4 +20,4 @@ <h2 class="flow--heading flow--heading--h2">Status</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">StatusBadge</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">StatusBadge</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">status</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">danger</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">SSL fehlt</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">StatusBadge</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Row</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/status/status-badge\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/status/status-badge\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/status/status-badge\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"status\\\",\\\"status-badge\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/status/status-badge\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T4e9,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"StatusBadge\"}],\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusBadge\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"StatusBadge\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/status/status-badge\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/status/status-badge\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/status/status-badge\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"status\\\",\\\"status-badge\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/status/status-badge\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T4e9,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"StatusBadge\"}],\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusBadge\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"StatusBadge\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/status/status-badge.txt b/docs/chore/cleanup-preview-repo/02-components/status/status-badge.txt
index df98d9b513..ba3d31d412 100644
--- a/docs/chore/cleanup-preview-repo/02-components/status/status-badge.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/status/status-badge.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/status/status-badge","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/status/status-badge","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"status-badge\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/status-badge","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/status/status-badge","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"status-badge\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/status-badge","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/status/status-icon.html b/docs/chore/cleanup-preview-repo/02-components/status/status-icon.html
index 7086e4fddf..ece55e57a8 100644
--- a/docs/chore/cleanup-preview-repo/02-components/status/status-icon.html
+++ b/docs/chore/cleanup-preview-repo/02-components/status/status-icon.html
@@ -18,4 +18,4 @@ <h2 class="flow--heading flow--heading--h2">Status</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">StatusIcon</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">status</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">warning</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">StatusIcon</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">status</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">danger</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Row</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/status/status-icon\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/status/status-icon\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/status/status-icon\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"status\\\",\\\"status-icon\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/status/status-icon\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T61e,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    h3: \"h3\",\n    p: \"p\",\n    code: \"code\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Accessibility\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"The \", _jsx(_components.code, {\n        children: \"aria-label\"\n      }), \" is pre-filled with a standard translation based on the variant.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"StatusIcon\"}],\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusIcon\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"StatusIcon\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/status/status-icon\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/status/status-icon\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/status/status-icon\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"status\\\",\\\"status-icon\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/status/status-icon\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T61e,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    h3: \"h3\",\n    p: \"p\",\n    code: \"code\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Accessibility\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"The \", _jsx(_components.code, {\n        children: \"aria-label\"\n      }), \" is pre-filled with a standard translation based on the variant.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Status\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"StatusIcon\"}],\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusIcon\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"StatusIcon\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/status/status-icon.txt b/docs/chore/cleanup-preview-repo/02-components/status/status-icon.txt
index 79244afaa0..f8b2d8a4ef 100644
--- a/docs/chore/cleanup-preview-repo/02-components/status/status-icon.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/status/status-icon.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/status/status-icon","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/status/status-icon","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"status-icon\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/status-icon","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/status/status-icon","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"status-icon\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/status-icon","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/structure/accordion.html b/docs/chore/cleanup-preview-repo/02-components/structure/accordion.html
index c0e48e75d1..45129e6e68 100644
--- a/docs/chore/cleanup-preview-repo/02-components/structure/accordion.html
+++ b/docs/chore/cleanup-preview-repo/02-components/structure/accordion.html
@@ -32,4 +32,4 @@ <h2 class="flow--heading flow--heading--h2">Mit Label</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Accordion Titel</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Content</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Inhalt des Accordions</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Content</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Accordion</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/structure/accordion\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/structure/accordion\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/accordion\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"structure\\\",\\\"accordion\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/accordion\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T57c,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"DefaultExpanded\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"default-expanded\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Label\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"label\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Accordion\"}],\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Accordion\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Accordion\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/structure/accordion\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/structure/accordion\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/accordion\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"structure\\\",\\\"accordion\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/accordion\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T57c,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"DefaultExpanded\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"default-expanded\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Label\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"label\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Accordion\"}],\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Accordion\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Accordion\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/structure/accordion.txt b/docs/chore/cleanup-preview-repo/02-components/structure/accordion.txt
index 7c4b935941..bcd0096363 100644
--- a/docs/chore/cleanup-preview-repo/02-components/structure/accordion.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/structure/accordion.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/structure/accordion","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/structure/accordion","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"accordion\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/accordion","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/structure/accordion","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"accordion\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/accordion","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/structure/column-layout.html b/docs/chore/cleanup-preview-repo/02-components/structure/column-layout.html
index 47612e4cf4..115af192cc 100644
--- a/docs/chore/cleanup-preview-repo/02-components/structure/column-layout.html
+++ b/docs/chore/cleanup-preview-repo/02-components/structure/column-layout.html
@@ -47,4 +47,4 @@ <h2 class="flow--heading flow--heading--h2">Benutzerdefinierte Values</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Hausnummer</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Label</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">TextField</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">ColumnLayout</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/structure/column-layout\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/structure/column-layout\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/column-layout\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"structure\\\",\\\"column-layout\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/column-layout\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T9dd,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    p: \"p\",\n    ul: \"ul\",\n    li: \"li\",\n    code: \"code\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Im Default werden die Spalten folgendermaßen gesetzt:\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsxs(_components.li, {\n        children: [\"s: \", _jsx(_components.code, {\n          children: \"[1]\"\n        })]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"m: \", _jsx(_components.code, {\n          children: \"[1, 1]\"\n        })]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"l: \", _jsx(_components.code, {\n          children: \"[1, 1, 1]\"\n        })]\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Benutzerdefinierte Values\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Größere Größen erben von kleineren größen, sofern sie nicht gesetzt sind:\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsxs(_components.li, {\n        children: [\"s: \", _jsx(_components.code, {\n          children: \"[1]\"\n        }), \" (default)\"]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"m: \", _jsx(_components.code, {\n          children: \"[2, 1]\"\n        })]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"l: \", _jsx(_components.code, {\n          children: \"[2, 1]\"\n        }), \" (inherited)\"]\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"custom-values\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ColumnLayout\"}],\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ColumnLayout\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"ColumnLayout\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/structure/column-layout\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/structure/column-layout\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/column-layout\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"structure\\\",\\\"column-layout\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/column-layout\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T9dd,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    p: \"p\",\n    ul: \"ul\",\n    li: \"li\",\n    code: \"code\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Im Default werden die Spalten folgendermaßen gesetzt:\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsxs(_components.li, {\n        children: [\"s: \", _jsx(_components.code, {\n          children: \"[1]\"\n        })]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"m: \", _jsx(_components.code, {\n          children: \"[1, 1]\"\n        })]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"l: \", _jsx(_components.code, {\n          children: \"[1, 1, 1]\"\n        })]\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Benutzerdefinierte Values\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Größere Größen erben von kleineren größen, sofern sie nicht gesetzt sind:\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsxs(_components.li, {\n        children: [\"s: \", _jsx(_components.code, {\n          children: \"[1]\"\n        }), \" (default)\"]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"m: \", _jsx(_components.code, {\n          children: \"[2, 1]\"\n        })]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"l: \", _jsx(_components.code, {\n          children: \"[2, 1]\"\n        }), \" (inherited)\"]\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"custom-values\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ColumnLayout\"}],\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ColumnLayout\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"ColumnLayout\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/structure/column-layout.txt b/docs/chore/cleanup-preview-repo/02-components/structure/column-layout.txt
index 159228efb9..3be3c768c3 100644
--- a/docs/chore/cleanup-preview-repo/02-components/structure/column-layout.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/structure/column-layout.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/structure/column-layout","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/structure/column-layout","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"column-layout\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/column-layout","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/structure/column-layout","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"column-layout\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/column-layout","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/structure/layout-card.html b/docs/chore/cleanup-preview-repo/02-components/structure/layout-card.html
index c628a1b4c7..8c9873106c 100644
--- a/docs/chore/cleanup-preview-repo/02-components/structure/layout-card.html
+++ b/docs/chore/cleanup-preview-repo/02-components/structure/layout-card.html
@@ -5,4 +5,4 @@
 <div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--layout-card">Inhalt der Layout Card</div></div><div class="LiveCodeEditor_editorContainer__dsY4x"><div class="LiveCodeEditor_editor__KuUVR"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#000000;background-color:#ffffff" spellCheck="false"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LayoutCard</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@mittwald/flow-react-components/LayoutCard&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span>
 </span><span class="token-line" style="color:#000000">
 </span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">LayoutCard</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text">Inhalt der Layout Card</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">LayoutCard</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/structure/layout-card\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/structure/layout-card\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/layout-card\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"structure\\\",\\\"layout-card\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/layout-card\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LayoutCard\"}],\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LayoutCard\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"LayoutCard\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/structure/layout-card\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/structure/layout-card\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/layout-card\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"structure\\\",\\\"layout-card\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/layout-card\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n147:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"14a:T423,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LayoutCard\"}],\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LayoutCard\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L147\",null,{\"children\":[[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"LayoutCard\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/structure/layout-card.txt b/docs/chore/cleanup-preview-repo/02-components/structure/layout-card.txt
index 7cd1cb3591..d9ae37c149 100644
--- a/docs/chore/cleanup-preview-repo/02-components/structure/layout-card.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/structure/layout-card.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/structure/layout-card","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/structure/layout-card","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"layout-card\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/layout-card","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/structure/layout-card","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"layout-card\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/layout-card","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/structure/list.html b/docs/chore/cleanup-preview-repo/02-components/structure/list.html
index 6d5edd4f0c..d082b33172 100644
--- a/docs/chore/cleanup-preview-repo/02-components/structure/list.html
+++ b/docs/chore/cleanup-preview-repo/02-components/structure/list.html
@@ -110,4 +110,4 @@ <h2 class="flow--heading flow--heading--h2">Mit verlinkten Elementen</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">ListItemView</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">List</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/structure/list\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/structure/list\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/list\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"structure\\\",\\\"list\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/list\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n14b:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n148:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuIte"])</script><script>self.__next_f.push([1,"m,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n149:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cTe"])</script><script>self.__next_f.push([1,"xt\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n14d:T4fd,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit verlinkten Elementen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"withLink\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu"])</script><script>self.__next_f.push([1," from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n14f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n         "])</script><script>self.__next_f.push([1,"   \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n150:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"List\"}],\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/List\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$147\",\"main\":\"$148\",\"withLink\":\"$149\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L14a\",null,{\"children\":[[\"$\",\"$L14b\",null,{\"children\":[[\"$\",\"$L14c\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14d\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$14e\",\"main\":\"$14f\",\"withLink\":\"$150\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"List\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/structure/list\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/structure/list\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/list\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"structure\\\",\\\"list\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/list\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n14b:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n148:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuIte"])</script><script>self.__next_f.push([1,"m,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n149:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cTe"])</script><script>self.__next_f.push([1,"xt\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n14d:T4fd,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit verlinkten Elementen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"withLink\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu"])</script><script>self.__next_f.push([1," from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n14f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n         "])</script><script>self.__next_f.push([1,"   \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n150:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"List\"}],\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/List\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$147\",\"main\":\"$148\",\"withLink\":\"$149\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L14a\",null,{\"children\":[[\"$\",\"$L14b\",null,{\"children\":[[\"$\",\"$L14c\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14d\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$14e\",\"main\":\"$14f\",\"withLink\":\"$150\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"List\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/structure/list.txt b/docs/chore/cleanup-preview-repo/02-components/structure/list.txt
index 11130fef66..33e1024c75 100644
--- a/docs/chore/cleanup-preview-repo/02-components/structure/list.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/structure/list.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/structure/list","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/structure/list","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"list\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/list","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/structure/list","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"list\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/list","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/02-components/structure/section.html b/docs/chore/cleanup-preview-repo/02-components/structure/section.html
index 0442ee8f2e..6d240d0114 100644
--- a/docs/chore/cleanup-preview-repo/02-components/structure/section.html
+++ b/docs/chore/cleanup-preview-repo/02-components/structure/section.html
@@ -94,4 +94,4 @@ <h2 class="flow--heading flow--heading--h2">Mit Switch</h2>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    Laufenden.</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Text</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Section</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/structure/section\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/structure/section\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/section\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"structure\\\",\\\"section\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/section\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n14b:T678,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mehrere Sections\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit StatusBadge\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status-badge\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx"])</script><script>self.__next_f.push([1,"(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Switch\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"switch\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14c:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Section\"}],\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Section\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$147\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$14c\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Section\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code anzeigen</span></button></div></div></section></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n3:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"02-components/structure/section\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/02-components/structure/section\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/section\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-components\\\",\\\"structure\\\",\\\"section\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-components/structure/section\",\"c\"],{\"children\":[\"__PAGE__\",{},[[\"$L5\",\"$L6\"],null],null]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$8\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$La\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$Lb\"],\"globalErrorComponent\":\"$c\",\"missingSlots\":\"$Wd\"}]]\n"])</script><script>self.__next_f.push([1,"e:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n12:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n23:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n24:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n25:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n27:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n113:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n141:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n142:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"LayoutCard\"]\n143:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"ColumnLayout\"]\n144:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e"])</script><script>self.__next_f.push([1,"9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Link\"]\n145:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconExternalLink\"]\n146:I[47401,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n148:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tabs\"]\n149:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Tab\"]\n14a:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"TabTitle\"]\n13:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"14:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"15:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n16:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"17:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n19:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1a:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1b:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n1c:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1e:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n21:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n29:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2a:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2b:{}\n28:{\"compiledSource\":\"$29\",\"frontmatter\":\"$2a\",\"scope\":\"$2b\"}\n2c:{}\n2d:[\"01-getting-started\",\"installation\"]\n2f:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"30:{}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n33:[\"01-getting-started\",\"stylesheet\"]\n35:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n36:{}\n34:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$35\",\"scope\":\"$36\"}\n38:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n37:{\"confirmation\":\"$38\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n39:[\"02-components\",\"actions\",\"action\"]\n3b:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3c:{}\n3a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3b\",\"scope\":\"$3c\"}\n3d:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3e:[\"02-components\",\"actions\",\"button-group\"]\n40:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n41:{}\n3f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$40\",\"scope\":\"$41\"}\n"])</script><script>self.__next_f.push([1,"42:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"43:[\"02-components\",\"actions\",\"button\"]\n45:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n46:{}\n44:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$45\",\"scope\":\"$46\"}\n"])</script><script>self.__next_f.push([1,"47:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"48:[\"02-components\",\"actions\",\"context-menu\"]\n4a:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n4b:{}\n49:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4a\",\"scope\":\"$4b\"}\n4c:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4d:[\"02-components\",\"actions\",\"copy-button\"]\n4f:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n50:{}\n4e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n51:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n52:[\"02-components\",\"content\",\"avatar\"]\n54:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n55:{}\n53:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n57:[\"02-components\",\"content\",\"heading\"]\n59:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n5a:{}\n58:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$59\",\"scope\":\"$5a\"}\n5c:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5d:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5b:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$5c\",\"functional\":\"$5d\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5e:[\"02-components\",\"content\",\"icon\"]\n60:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n61:{}\n5f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$60\",\"scope\":\"$61\"}\n62:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n63:[\"02-components\",\"content\",\"illustrated-message\"]\n65:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n66:{}\n64:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$65\",\"scope\":\"$66\"}\n67:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n68:[\"02-components\",\"content\",\"image\"]\n6a:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n6b:{}\n69:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6d:[\"02-components\",\"content\",\"inline-code\"]\n6f:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n70:{}\n6e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n72:[\"02-components\",\"content\",\"label\"]\n74:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n75:{}\n73:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$74\",\"scope\":\"$75\"}\n76:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n77:[\"02-components\",\"content\",\"labeled-value\"]\n79:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n7a:{}\n78:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n7c:[\"02-components\",\"content\",\"skeleton\"]\n7e:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7f:{}\n7d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n81:[\"02-components\",\"content\",\"text\"]\n83:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n84:{}\n82:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$83\",\"scope\":\"$84\"}\n85:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n86:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n88:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n89:{}\n87:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n8b:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8d:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8e:{}\n8c:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n90:[\"02-components\",\"form-controls\",\"checkbox\"]\n92:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n93:{}\n91:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$92\",\"scope\":\"$93\"}\n94:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n95:[\"02-components\",\"form-controls\",\"number-field\"]\n97:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n98:{}\n96:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$97\",\"scope\":\"$98\"}\n"])</script><script>self.__next_f.push([1,"99:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"9a:[\"02-components\",\"form-controls\",\"radio-group\"]\n9c:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9d:{}\n9b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9f:[\"02-components\",\"form-controls\",\"select\"]\na1:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\na2:{}\na0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\na3:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na4:[\"02-components\",\"form-controls\",\"switch\"]\na6:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na7:{}\na5:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a6\",\"scope\":\"$a7\"}\na8:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na9:[\"02-components\",\"form-controls\",\"text-area\"]\nab:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\nac:{}\naa:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nae:[\"02-components\",\"form-controls\",\"text-field\"]\nb0:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nb1:{}\naf:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb3:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb5:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb6:{}\nb4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b5\",\"scope\":\"$b6\"}\nb8:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb7:{\"contextMenu\":\"$b8\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb9:[\"02-components\",\"navigation\",\"header-navigation\"]\nbb:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nbc:{}\nba:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bb\",\"scope\":\"$bc\"}\nbd:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbe:[\"02-components\",\"navigation\",\"link\"]\nc0:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nc1:{}\nbf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c0\",\"scope\":\"$c1\"}\n"])</script><script>self.__next_f.push([1,"c2:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c3:[\"02-components\",\"navigation\",\"navigation\"]\nc5:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc6:{}\nc4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c5\",\"scope\":\"$c6\"}\nc8:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc7:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c8\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc9:[\"02-components\",\"navigation\",\"tabs\"]\ncb:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ncc:{}\nca:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cb\",\"scope\":\"$cc\"}\nce:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncf:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncd:{\"default\":\"$ce\",\"offCanvas\":\"$cf\"}\nd0:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nd2:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd3:{}\nd1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\nd5:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd4:{\"default\":\"$d5\"}\nd6:[\"02-components\",\"overlays\",\"off-canvas\"]\nd8:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd9:{}\nd7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d8\",\"scope\":\"$d9\"}\nda:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ndb:[\"02-components\",\"overlays\",\"tooltip\"]\ndd:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nde:{}\ndc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dd\",\"scope\":\"$de\"}\ne0:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndf:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$e0\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ne1:[\"02-components\",\"status\",\"inline-alert\"]\ne3:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne4:{}\ne2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e3\",\"scope\":\"$e4\"}\ne5:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne6:[\"02-components\",\"status\",\"loading-spinner\"]\ne8:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne9:{}\ne7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e8\",\"scope\":\"$e9\"}\nea:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\neb:[\"02-components\",\"status\",\"progress-bar\"]\ned:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nee:{}\nec:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nf0:[\"02-components\",\"status\",\"status-badge\"]\nf2:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf3:{}\nf1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf5:[\"02-components\",\"status\",\"status-icon\"]\nf7:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf8:{}\nf6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nf9:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"a:[\"02-components\",\"structure\",\"accordion\"]\nfc:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfd:{}\nfb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fc\",\"scope\":\"$fd\"}\nfe:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nff:[\"02-components\",\"structure\",\"column-layout\"]\n101:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n102:{}\n100:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$101\",\"scope\":\"$102\"}\n103:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n104:[\"02-components\",\"structure\",\"layout-card\"]\n106:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n107:{}\n105:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nco"])</script><script>self.__next_f.push([1,"nst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$106\",\"scope\":\"$107\"}\n109:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n "])</script><script>self.__next_f.push([1,"           \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10a:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n10b:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/stru"])</script><script>self.__next_f.push([1,"cture/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:{\"default\":\"$109\",\"main\":\"$10a\",\"withLink\":\"$10b\"}\n10c:[\"02-components\",\"structure\",\"list\"]\n10e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10f:{}\n10d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  retur"])</script><script>self.__next_f.push([1,"n MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10e\",\"scope\":\"$10f\"}\n111:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n110:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink h"])</script><script>self.__next_f.push([1,"ref=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$111\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n112:[\"02-components\",\"structure\",\"section\"]\n115:{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n116:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n117:{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"}\n118:{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n119:{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"}\n11a:{\"mdxSource\":\"$44\",\"e"])</script><script>self.__next_f.push([1,"xamples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n11b:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n11c:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11d:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11e:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11f:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n120:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"}\n121:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n122:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"}\n123:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n124:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n125:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"}\n126:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n127:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n128:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n129:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n12a:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n12b:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n12c:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":"])</script><script>self.__next_f.push([1,"\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12d:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12e:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12f:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n130:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n131:{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n132:{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n133:{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n134:{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n135:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n136:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n137:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n138:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n139:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n13a:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n13b:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n13c:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13d:{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13e:{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\""])</script><script>self.__next_f.push([1,":\"02-components/structure/layout-card/index.mdx\"}\n13f:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"}\n140:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}\n114:[\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$15\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$16\",\"functional\":\"$17\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$18\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$19\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"offCanvas\":\"$1b\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$1c\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1d\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1e\",\"main\":\"$1f\",\"withLink\":\"$20\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$21\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L25\",null,{}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L113\",null,{\"docs\":\"$114\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L141\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L113\",null,{\"docs\":[{\"mdxSource\":\"$28\",\"examples\":\"$2c\",\"slugs\":\"$2d\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$37\",\"slugs\":\"$39\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3d\",\"slugs\":\"$3e\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3f\",\"examples\":\"$42\",\"slugs\":\"$43\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$44\",\"examples\":\"$47\",\"slugs\":\"$48\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5e\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$68\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b9\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$ba\",\"examples\":\"$bd\",\"slugs\":\"$be\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bf\",\"examples\":\"$c2\",\"slugs\":\"$c3\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c4\",\"examples\":\"$c7\",\"slugs\":\"$c9\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$ca\",\"examples\":\"$cd\",\"slugs\":\"$d0\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d6\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$eb\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fa\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$fb\",\"examples\":\"$fe\",\"slugs\":\"$ff\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$100\",\"examples\":\"$103\",\"slugs\":\"$104\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$10c\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$112\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"147:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n14b:T678,/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    hr: \"hr\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mehrere Sections\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit StatusBadge\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"status-badge\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx"])</script><script>self.__next_f.push([1,"(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Switch\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"switch\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n14c:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L143\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Section\"}],\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\",[\"$\",\"$L144\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Section\",\"children\":[\"GitHub\",[\"$\",\"$L145\",null,{}]]}]]}],[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$147\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}}]]}]}],[\"$\",\"$L142\",null,{\"children\":[\"$\",\"$L148\",null,{\"children\":[[\"$\",\"$L149\",null,{\"children\":[[\"$\",\"$L14a\",null,{\"children\":\"Overview\"}],[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L146\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$14b\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$14c\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/overview.mdx\"}}]}]]}],\"$undefined\",\"$undefined\"]}]}]]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Section\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/02-components/structure/section.txt b/docs/chore/cleanup-preview-repo/02-components/structure/section.txt
index 0a51d5fb7c..9ad111b60b 100644
--- a/docs/chore/cleanup-preview-repo/02-components/structure/section.txt
+++ b/docs/chore/cleanup-preview-repo/02-components/structure/section.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-components/structure/section","c"]
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":[["slug","02-components/structure/section","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"section\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/section","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":[["slug","02-components/structure/section","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"section\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/section","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/ddec2095e74e431d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"default"]
diff --git a/docs/chore/cleanup-preview-repo/404.html b/docs/chore/cleanup-preview-repo/404.html
index c673dbb5a7..9d7049e67c 100644
--- a/docs/chore/cleanup-preview-repo/404.html
+++ b/docs/chore/cleanup-preview-repo/404.html
@@ -1,4 +1,4 @@
 <!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js"/><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/927-6cab5a8cbc905115.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/74-67d40533ec347d4f.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/81-f9a6f09548b7e67f.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/app/layout-3b1912d54e46d7f7.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/416-1dd9870f9bc411a7.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js" async=""></script><title>404: This page could not be found.</title><title>Flow – mittwald Design System</title><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script></head><body class="flow layout_body__oiEIT"><header class="layout_header__ttTk7"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1746.7 1232" focusable="false" role="img" aria-hidden="true" class="flow--icon layout_logo__PcxmI flow--icon--size-l">
   <path d="M1117.2,285.4c-102.5,0-226.5,52.1-291.3,160c-46.7-100.7-134.8-160-276.9-160 c-101.4,0-201.2,50.8-256.1,124.1l-29.8-151.3L17.4,306.3l29.9,152.2l0.1,2.4l-0.1,741.3h240.9V736.7 c0-118.7,61.1-222.9,183.4-222.9C601,513.8,628,601.9,628,720.6v481.8h240.9V727.7c0-118.7,64.7-213.9,183.4-213.9 c127.6,0,156.4,88.1,156.4,206.8v499.8l240.9-47.2V690C1449.8,459.8,1370.7,285.4,1117.2,285.4z"></path>
   <path d="M1569.2,23.7c-83,0-152.4,69.5-152.4,154.3c0,83,69.5,152.4,152.4,152.4c84.9,0,154.4-69.5,154.4-152.4 C1723.5,93.1,1654.1,23.7,1569.2,23.7z"></path>
-</svg><h1 class="flow--heading flow--heading--h1">Flow</h1><div class="flow--status-badge flow--status-badge--warning layout_betaBadge__Rtyuk"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-alert-circle flow--icon flow--status-icon flow--status-icon--warning flow--icon--size-s" focusable="false" role="img" aria-hidden="false" aria-label="Status warning"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg><span class="flow--status-badge--text">beta</span></div><nav class="flow--header-navigation layout_headerNavigation__SNRbw" role="navigation" aria-label="Header navigation"><ul><li><a class="flow--header-navigation--link" href="/flow-previews/docs/chore/cleanup-preview-repo/01-getting-started/installation"><span class="flow--emulated-bold-text">Getting started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Getting started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/chore/cleanup-preview-repo/02-components/actions/action"><span class="flow--emulated-bold-text">Components<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Components</span></span></a></li></ul></nav><nav class="flow--header-navigation layout_mobileNavigation__1XY9K" role="navigation"><ul><button type="button" class="flow--button flow--button--secondary flow--button--plain" data-rac=""><span class="flow--button--content"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-menu-2 flow--icon flow--button--icon flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg></span></button></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"></div><main class="layout_main__30FUz"><div style="font-family:system-ui,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:49px;margin:0">This page could not be found.</h2></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"3:I[20122,[],\"\"]\n5:I[68648,[],\"\"]\n6:I[91385,[],\"\"]\n9:I[16872,[],\"\"]\na:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/_not-found\",\"initialTree\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{},[[\"$L4\",[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]],null],null]},[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"/_not-found\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$L7\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L8\"],\"globalErrorComponent\":\"$9\",\"missingSlots\":\"$Wa\"}]]\n"])</script><script>self.__next_f.push([1,"b:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nc:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\nd:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\ne:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\nf:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n1f:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n20:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n21:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n22:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d"])</script><script>self.__next_f.push([1,"709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n23:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n24:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n110:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n13e:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n10:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"11:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"12:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n13:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"14:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"15:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n16:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n17:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n18:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n19:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1a:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1b:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1c:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1d:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1e:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"27:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n28:{}\n25:{\"compiledSource\":\"$26\",\"frontmatter\":\"$27\",\"scope\":\"$28\"}\n29:{}\n2a:[\"01-getting-started\",\"installation\"]\n2c:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2d:{}\n2e:{}\n2b:{\"compiledSource\":\"$2c\",\"frontmatter\":\"$2d\",\"scope\":\"$2e\"}\n2f:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n30:[\"01-getting-started\",\"stylesheet\"]\n32:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n33:{}\n31:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$32\",\"scope\":\"$33\"}\n35:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n34:{\"confirmation\":\"$35\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n36:[\"02-components\",\"actions\",\"action\"]\n38:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n39:{}\n37:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$38\",\"scope\":\"$39\"}\n3a:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3b:[\"02-components\",\"actions\",\"button-group\"]\n3d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n3e:{}\n3c:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n"])</script><script>self.__next_f.push([1,"3f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"40:[\"02-components\",\"actions\",\"button\"]\n42:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n43:{}\n41:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$42\",\"scope\":\"$43\"}\n"])</script><script>self.__next_f.push([1,"44:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"45:[\"02-components\",\"actions\",\"context-menu\"]\n47:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n48:{}\n46:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n49:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4a:[\"02-components\",\"actions\",\"copy-button\"]\n4c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n4d:{}\n4b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4c\",\"scope\":\"$4d\"}\n4e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n4f:[\"02-components\",\"content\",\"avatar\"]\n51:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n52:{}\n50:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$51\",\"scope\":\"$52\"}\n53:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n54:[\"02-components\",\"content\",\"heading\"]\n56:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n57:{}\n55:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$56\",\"scope\":\"$57\"}\n59:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"58:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$59\",\"functional\":\"$5a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5b:[\"02-components\",\"content\",\"icon\"]\n5d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n5e:{}\n5c:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5d\",\"scope\":\"$5e\"}\n5f:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n60:[\"02-components\",\"content\",\"illustrated-message\"]\n62:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n63:{}\n61:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$62\",\"scope\":\"$63\"}\n64:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n65:[\"02-components\",\"content\",\"image\"]\n67:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n68:{}\n66:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$67\",\"scope\":\"$68\"}\n69:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6a:[\"02-components\",\"content\",\"inline-code\"]\n6c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n6d:{}\n6b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6c\",\"scope\":\"$6d\"}\n6e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n6f:[\"02-components\",\"content\",\"label\"]\n71:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n72:{}\n70:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$71\",\"scope\":\"$72\"}\n73:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n74:[\"02-components\",\"content\",\"labeled-value\"]\n76:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n77:{}\n75:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n79:[\"02-components\",\"content\",\"skeleton\"]\n7b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7c:{}\n7a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n7e:[\"02-components\",\"content\",\"text\"]\n80:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n81:{}\n7f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$80\",\"scope\":\"$81\"}\n82:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n83:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n85:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n86:{}\n84:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n88:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8b:{}\n89:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8a\",\"scope\":\"$8b\"}\n8c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n8d:[\"02-components\",\"form-controls\",\"checkbox\"]\n8f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n90:{}\n8e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8f\",\"scope\":\"$90\"}\n91:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n92:[\"02-components\",\"form-controls\",\"number-field\"]\n94:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n95:{}\n93:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$94\",\"scope\":\"$95\"}\n"])</script><script>self.__next_f.push([1,"96:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"97:[\"02-components\",\"form-controls\",\"radio-group\"]\n99:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9a:{}\n98:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$99\",\"scope\":\"$9a\"}\n9b:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9c:[\"02-components\",\"form-controls\",\"select\"]\n9e:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\n9f:{}\n9d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9e\",\"scope\":\"$9f\"}\na0:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na1:[\"02-components\",\"form-controls\",\"switch\"]\na3:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na4:{}\na2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a3\",\"scope\":\"$a4\"}\na5:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na6:[\"02-components\",\"form-controls\",\"text-area\"]\na8:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\na9:{}\na7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a8\",\"scope\":\"$a9\"}\naa:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nab:[\"02-components\",\"form-controls\",\"text-field\"]\nad:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nae:{}\nac:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ad\",\"scope\":\"$ae\"}\naf:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb0:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb2:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb3:{}\nb1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b2\",\"scope\":\"$b3\"}\nb5:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb4:{\"contextMenu\":\"$b5\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb6:[\"02-components\",\"navigation\",\"header-navigation\"]\nb8:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nb9:{}\nb7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b8\",\"scope\":\"$b9\"}\nba:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbb:[\"02-components\",\"navigation\",\"link\"]\nbd:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c0:[\"02-components\",\"navigation\",\"navigation\"]\nc2:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc3:{}\nc1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c2\",\"scope\":\"$c3\"}\nc5:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc4:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c5\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc6:[\"02-components\",\"navigation\",\"tabs\"]\nc8:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\nc9:{}\nc7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c8\",\"scope\":\"$c9\"}\ncb:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncc:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\nca:{\"default\":\"$cb\",\"offCanvas\":\"$cc\"}\ncd:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\ncf:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd0:{}\nce:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cf\",\"scope\":\"$d0\"}\nd2:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd1:{\"default\":\"$d2\"}\nd3:[\"02-components\",\"overlays\",\"off-canvas\"]\nd5:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd6:{}\nd4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d5\",\"scope\":\"$d6\"}\nd7:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nd8:[\"02-components\",\"overlays\",\"tooltip\"]\nda:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\ndb:{}\nd9:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$da\",\"scope\":\"$db\"}\ndd:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndc:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$dd\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nde:[\"02-components\",\"status\",\"inline-alert\"]\ne0:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne1:{}\ndf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e0\",\"scope\":\"$e1\"}\ne2:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne3:[\"02-components\",\"status\",\"loading-spinner\"]\ne5:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne6:{}\ne4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e5\",\"scope\":\"$e6\"}\ne7:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\ne8:[\"02-components\",\"status\",\"progress-bar\"]\nea:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\neb:{}\ne9:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ea\",\"scope\":\"$eb\"}\nec:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\ned:[\"02-components\",\"status\",\"status-badge\"]\nef:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf0:{}\nee:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ef\",\"scope\":\"$f0\"}\nf1:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf2:[\"02-components\",\"status\",\"status-icon\"]\nf4:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf5:{}\nf3:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f4\",\"scope\":\"$f5\"}\nf6:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"7:[\"02-components\",\"structure\",\"accordion\"]\nf9:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfa:{}\nf8:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f9\",\"scope\":\"$fa\"}\nfb:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nfc:[\"02-components\",\"structure\",\"column-layout\"]\nfe:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\nff:{}\nfd:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fe\",\"scope\":\"$ff\"}\n100:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n101:[\"02-components\",\"structure\",\"layout-card\"]\n103:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n104:{}\n102:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$103\",\"scope\":\"$104\"}\n106:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n      "])</script><script>self.__next_f.push([1,"      \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n107:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure"])</script><script>self.__next_f.push([1,"/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n105:{\"default\":\"$106\",\"main\":\"$107\",\"withLink\":\"$108\"}\n109:[\"02-components\",\"structure\",\"list\"]\n10b:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10c:{}\n10a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDX"])</script><script>self.__next_f.push([1,"Layout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10b\",\"scope\":\"$10c\"}\n10e:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n10d:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\"])</script><script>self.__next_f.push([1,"\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$10e\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n10f:[\"02-components\",\"structure\",\"section\"]\n112:{\"mdxSource\":\"$25\",\"examples\":\"$29\",\"slugs\":\"$2a\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n113:{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n114:{\"mdxSource\":\"$31\",\"examples\":\"$34\",\"slugs\":\"$36\",\"filename\":\"02-components/actions/action/index.mdx\"}\n115:{\"mdxSource\":\"$37\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n116:{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-components/actions/button/index.mdx\"}\n117:{\"mdxSource\":\"$41\",\"exampl"])</script><script>self.__next_f.push([1,"es\":\"$44\",\"slugs\":\"$45\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n118:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4a\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n119:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11a:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11b:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$5b\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11c:{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n11d:{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$65\",\"filename\":\"02-components/content/image/index.mdx\"}\n11e:{\"mdxSource\":\"$66\",\"examples\":\"$69\",\"slugs\":\"$6a\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n11f:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"02-components/content/label/index.mdx\"}\n120:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n121:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n122:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"02-components/content/text/index.mdx\"}\n123:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n124:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n125:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n126:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n127:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n128:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n129:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\""])</script><script>self.__next_f.push([1,",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12a:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a6\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12b:{\"mdxSource\":\"$a7\",\"examples\":\"$aa\",\"slugs\":\"$ab\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12c:{\"mdxSource\":\"$ac\",\"examples\":\"$af\",\"slugs\":\"$b0\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n12d:{\"mdxSource\":\"$b1\",\"examples\":\"$b4\",\"slugs\":\"$b6\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n12e:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n12f:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n130:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c6\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n131:{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cd\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n132:{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d3\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n133:{\"mdxSource\":\"$d4\",\"examples\":\"$d7\",\"slugs\":\"$d8\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n134:{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$de\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n135:{\"mdxSource\":\"$df\",\"examples\":\"$e2\",\"slugs\":\"$e3\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n136:{\"mdxSource\":\"$e4\",\"examples\":\"$e7\",\"slugs\":\"$e8\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n137:{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n138:{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n139:{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f7\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13a:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13b:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"02-c"])</script><script>self.__next_f.push([1,"omponents/structure/layout-card/index.mdx\"}\n13c:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$109\",\"filename\":\"02-components/structure/list/index.mdx\"}\n13d:{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10f\",\"filename\":\"02-components/structure/section/index.mdx\"}\n111:[\"$112\",\"$113\",\"$114\",\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\"]\n13f:{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"}\n140:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n141:{\"display\":\"inline-block\"}\n142:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n"])</script><script>self.__next_f.push([1,"7:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Lb\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lc\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$Ld\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$Le\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$Lf\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$10\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$11\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$12\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$13\",\"functional\":\"$14\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$15\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$16\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$17\",\"offCanvas\":\"$18\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$19\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1a\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1b\",\"main\":\"$1c\",\"withLink\":\"$1d\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$1e\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L1f\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L20\",null,{\"children\":[[\"$\",\"$L21\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L22\",null,{}]}],[\"$\",\"$L23\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L24\",null,{\"children\":[[\"$\",\"$Lf\",null,{\"docs\":[{\"mdxSource\":\"$25\",\"examples\":\"$29\",\"slugs\":\"$2a\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$31\",\"examples\":\"$34\",\"slugs\":\"$36\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$37\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4a\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$5b\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$65\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$66\",\"examples\":\"$69\",\"slugs\":\"$6a\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a6\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$a7\",\"examples\":\"$aa\",\"slugs\":\"$ab\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$ac\",\"examples\":\"$af\",\"slugs\":\"$b0\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b1\",\"examples\":\"$b4\",\"slugs\":\"$b6\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c6\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cd\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d3\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d4\",\"examples\":\"$d7\",\"slugs\":\"$d8\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$de\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$df\",\"examples\":\"$e2\",\"slugs\":\"$e3\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e4\",\"examples\":\"$e7\",\"slugs\":\"$e8\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f7\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$109\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10f\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L110\",null,{\"docs\":\"$111\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L13e\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L110\",null,{\"docs\":[{\"mdxSource\":\"$25\",\"examples\":\"$29\",\"slugs\":\"$2a\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$31\",\"examples\":\"$34\",\"slugs\":\"$36\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$37\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4a\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$5b\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$65\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$66\",\"examples\":\"$69\",\"slugs\":\"$6a\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a6\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$a7\",\"examples\":\"$aa\",\"slugs\":\"$ab\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$ac\",\"examples\":\"$af\",\"slugs\":\"$b0\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b1\",\"examples\":\"$b4\",\"slugs\":\"$b6\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c6\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cd\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d3\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d4\",\"examples\":\"$d7\",\"slugs\":\"$d8\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$de\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$df\",\"examples\":\"$e2\",\"slugs\":\"$e3\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e4\",\"examples\":\"$e7\",\"slugs\":\"$e8\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f7\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$109\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10f\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$13f\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$140\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$141\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$142\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"8:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Flow – mittwald Design System\"}]]\n4:null\n"])</script></body></html>
\ No newline at end of file
+</svg><h1 class="flow--heading flow--heading--h1">Flow</h1><div class="flow--status-badge flow--status-badge--warning layout_betaBadge__Rtyuk"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-alert-circle flow--icon flow--status-icon flow--status-icon--warning flow--icon--size-s" focusable="false" role="img" aria-hidden="false" aria-label="Status warning"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg><span class="flow--status-badge--text">beta</span></div><nav class="flow--header-navigation layout_headerNavigation__SNRbw" role="navigation" aria-label="Header navigation"><ul><li><a class="flow--header-navigation--link" href="/flow-previews/docs/chore/cleanup-preview-repo/01-getting-started/installation"><span class="flow--emulated-bold-text">Getting started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Getting started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/chore/cleanup-preview-repo/02-components/actions/action"><span class="flow--emulated-bold-text">Components<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Components</span></span></a></li></ul></nav><nav class="flow--header-navigation layout_mobileNavigation__1XY9K" role="navigation"><ul><button type="button" class="flow--button flow--button--secondary flow--button--plain" data-rac=""><span class="flow--button--content"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-menu-2 flow--icon flow--button--icon flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg></span></button></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"></div><main class="layout_main__30FUz"><div style="font-family:system-ui,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:49px;margin:0">This page could not be found.</h2></div></div></div></main></div><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"3:I[20122,[],\"\"]\n5:I[68648,[],\"\"]\n6:I[91385,[],\"\"]\n9:I[16872,[],\"\"]\na:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/_not-found\",\"initialTree\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{},[[\"$L4\",[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]],null],null]},[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"/_not-found\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$L7\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L8\"],\"globalErrorComponent\":\"$9\",\"missingSlots\":\"$Wa\"}]]\n"])</script><script>self.__next_f.push([1,"b:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nc:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\nd:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\ne:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\nf:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n1f:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n20:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n21:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n22:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d"])</script><script>self.__next_f.push([1,"709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n23:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n24:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n110:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n13e:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n10:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"11:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"12:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n13:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"14:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"15:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n16:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n17:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n18:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n19:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n1a:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1b:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1c:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1d:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1e:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"27:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n28:{}\n25:{\"compiledSource\":\"$26\",\"frontmatter\":\"$27\",\"scope\":\"$28\"}\n29:{}\n2a:[\"01-getting-started\",\"installation\"]\n2c:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2d:{}\n2e:{}\n2b:{\"compiledSource\":\"$2c\",\"frontmatter\":\"$2d\",\"scope\":\"$2e\"}\n2f:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n30:[\"01-getting-started\",\"stylesheet\"]\n32:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n33:{}\n31:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$32\",\"scope\":\"$33\"}\n35:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n34:{\"confirmation\":\"$35\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n36:[\"02-components\",\"actions\",\"action\"]\n38:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n39:{}\n37:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$38\",\"scope\":\"$39\"}\n3a:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3b:[\"02-components\",\"actions\",\"button-group\"]\n3d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n3e:{}\n3c:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n"])</script><script>self.__next_f.push([1,"3f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"40:[\"02-components\",\"actions\",\"button\"]\n42:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n43:{}\n41:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$42\",\"scope\":\"$43\"}\n"])</script><script>self.__next_f.push([1,"44:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"45:[\"02-components\",\"actions\",\"context-menu\"]\n47:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n48:{}\n46:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n49:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n4a:[\"02-components\",\"actions\",\"copy-button\"]\n4c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n4d:{}\n4b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4c\",\"scope\":\"$4d\"}\n4e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n4f:[\"02-components\",\"content\",\"avatar\"]\n51:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n52:{}\n50:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$51\",\"scope\":\"$52\"}\n53:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n54:[\"02-components\",\"content\",\"heading\"]\n56:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n57:{}\n55:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$56\",\"scope\":\"$57\"}\n59:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"5a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"58:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$59\",\"functional\":\"$5a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5b:[\"02-components\",\"content\",\"icon\"]\n5d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n5e:{}\n5c:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5d\",\"scope\":\"$5e\"}\n5f:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n60:[\"02-components\",\"content\",\"illustrated-message\"]\n62:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n63:{}\n61:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$62\",\"scope\":\"$63\"}\n64:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n65:[\"02-components\",\"content\",\"image\"]\n67:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n68:{}\n66:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$67\",\"scope\":\"$68\"}\n69:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n6a:[\"02-components\",\"content\",\"inline-code\"]\n6c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n6d:{}\n6b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6c\",\"scope\":\"$6d\"}\n6e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n6f:[\"02-components\",\"content\",\"label\"]\n71:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n72:{}\n70:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$71\",\"scope\":\"$72\"}\n73:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n74:[\"02-components\",\"content\",\"labeled-value\"]\n76:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n77:{}\n75:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n79:[\"02-components\",\"content\",\"skeleton\"]\n7b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7c:{}\n7a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n7e:[\"02-components\",\"content\",\"text\"]\n80:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n81:{}\n7f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$80\",\"scope\":\"$81\"}\n82:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n83:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n85:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n86:{}\n84:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n88:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n8a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8b:{}\n89:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8a\",\"scope\":\"$8b\"}\n8c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n8d:[\"02-components\",\"form-controls\",\"checkbox\"]\n8f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n90:{}\n8e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8f\",\"scope\":\"$90\"}\n91:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n92:[\"02-components\",\"form-controls\",\"number-field\"]\n94:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n95:{}\n93:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$94\",\"scope\":\"$95\"}\n"])</script><script>self.__next_f.push([1,"96:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"97:[\"02-components\",\"form-controls\",\"radio-group\"]\n99:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n9a:{}\n98:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$99\",\"scope\":\"$9a\"}\n9b:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9c:[\"02-components\",\"form-controls\",\"select\"]\n9e:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\n9f:{}\n9d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9e\",\"scope\":\"$9f\"}\na0:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na1:[\"02-components\",\"form-controls\",\"switch\"]\na3:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na4:{}\na2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a3\",\"scope\":\"$a4\"}\na5:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na6:[\"02-components\",\"form-controls\",\"text-area\"]\na8:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\na9:{}\na7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a8\",\"scope\":\"$a9\"}\naa:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\nab:[\"02-components\",\"form-controls\",\"text-field\"]\nad:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nae:{}\nac:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ad\",\"scope\":\"$ae\"}\naf:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\nb0:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb2:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb3:{}\nb1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b2\",\"scope\":\"$b3\"}\nb5:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb4:{\"contextMenu\":\"$b5\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb6:[\"02-components\",\"navigation\",\"header-navigation\"]\nb8:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nb9:{}\nb7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b8\",\"scope\":\"$b9\"}\nba:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nbb:[\"02-components\",\"navigation\",\"link\"]\nbd:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c0:[\"02-components\",\"navigation\",\"navigation\"]\nc2:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc3:{}\nc1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c2\",\"scope\":\"$c3\"}\nc5:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc4:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c5\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc6:[\"02-components\",\"navigation\",\"tabs\"]\nc8:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\nc9:{}\nc7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c8\",\"scope\":\"$c9\"}\ncb:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncc:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\nca:{\"default\":\"$cb\",\"offCanvas\":\"$cc\"}\ncd:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\ncf:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nd0:{}\nce:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cf\",\"scope\":\"$d0\"}\nd2:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd1:{\"default\":\"$d2\"}\nd3:[\"02-components\",\"overlays\",\"off-canvas\"]\nd5:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd6:{}\nd4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d5\",\"scope\":\"$d6\"}\nd7:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nd8:[\"02-components\",\"overlays\",\"tooltip\"]\nda:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\ndb:{}\nd9:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$da\",\"scope\":\"$db\"}\ndd:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndc:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$dd\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nde:[\"02-components\",\"status\",\"inline-alert\"]\ne0:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne1:{}\ndf:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e0\",\"scope\":\"$e1\"}\ne2:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne3:[\"02-components\",\"status\",\"loading-spinner\"]\ne5:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne6:{}\ne4:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e5\",\"scope\":\"$e6\"}\ne7:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\ne8:[\"02-components\",\"status\",\"progress-bar\"]\nea:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\neb:{}\ne9:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ea\",\"scope\":\"$eb\"}\nec:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\ned:[\"02-components\",\"status\",\"status-badge\"]\nef:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nf0:{}\nee:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ef\",\"scope\":\"$f0\"}\nf1:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf2:[\"02-components\",\"status\",\"status-icon\"]\nf4:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf5:{}\nf3:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f4\",\"scope\":\"$f5\"}\nf6:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"7:[\"02-components\",\"structure\",\"accordion\"]\nf9:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nfa:{}\nf8:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f9\",\"scope\":\"$fa\"}\nfb:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nfc:[\"02-components\",\"structure\",\"column-layout\"]\nfe:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\nff:{}\nfd:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fe\",\"scope\":\"$ff\"}\n100:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n101:[\"02-components\",\"structure\",\"layout-card\"]\n103:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n104:{}\n102:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$103\",\"scope\":\"$104\"}\n106:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n      "])</script><script>self.__next_f.push([1,"      \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n107:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n108:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure"])</script><script>self.__next_f.push([1,"/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n105:{\"default\":\"$106\",\"main\":\"$107\",\"withLink\":\"$108\"}\n109:[\"02-components\",\"structure\",\"list\"]\n10b:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10c:{}\n10a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDX"])</script><script>self.__next_f.push([1,"Layout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10b\",\"scope\":\"$10c\"}\n10e:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n10d:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\"])</script><script>self.__next_f.push([1,"\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$10e\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n10f:[\"02-components\",\"structure\",\"section\"]\n112:{\"mdxSource\":\"$25\",\"examples\":\"$29\",\"slugs\":\"$2a\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n113:{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n114:{\"mdxSource\":\"$31\",\"examples\":\"$34\",\"slugs\":\"$36\",\"filename\":\"02-components/actions/action/index.mdx\"}\n115:{\"mdxSource\":\"$37\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n116:{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-components/actions/button/index.mdx\"}\n117:{\"mdxSource\":\"$41\",\"exampl"])</script><script>self.__next_f.push([1,"es\":\"$44\",\"slugs\":\"$45\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n118:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4a\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n119:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n11a:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11b:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$5b\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11c:{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n11d:{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$65\",\"filename\":\"02-components/content/image/index.mdx\"}\n11e:{\"mdxSource\":\"$66\",\"examples\":\"$69\",\"slugs\":\"$6a\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n11f:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"02-components/content/label/index.mdx\"}\n120:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n121:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n122:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"02-components/content/text/index.mdx\"}\n123:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n124:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n125:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n126:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n127:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n128:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n129:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\""])</script><script>self.__next_f.push([1,",\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n12a:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a6\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12b:{\"mdxSource\":\"$a7\",\"examples\":\"$aa\",\"slugs\":\"$ab\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12c:{\"mdxSource\":\"$ac\",\"examples\":\"$af\",\"slugs\":\"$b0\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n12d:{\"mdxSource\":\"$b1\",\"examples\":\"$b4\",\"slugs\":\"$b6\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n12e:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n12f:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n130:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c6\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n131:{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cd\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n132:{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d3\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n133:{\"mdxSource\":\"$d4\",\"examples\":\"$d7\",\"slugs\":\"$d8\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n134:{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$de\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n135:{\"mdxSource\":\"$df\",\"examples\":\"$e2\",\"slugs\":\"$e3\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n136:{\"mdxSource\":\"$e4\",\"examples\":\"$e7\",\"slugs\":\"$e8\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n137:{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n138:{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n139:{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f7\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n13a:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13b:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"02-c"])</script><script>self.__next_f.push([1,"omponents/structure/layout-card/index.mdx\"}\n13c:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$109\",\"filename\":\"02-components/structure/list/index.mdx\"}\n13d:{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10f\",\"filename\":\"02-components/structure/section/index.mdx\"}\n111:[\"$112\",\"$113\",\"$114\",\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\"]\n13f:{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"}\n140:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n141:{\"display\":\"inline-block\"}\n142:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n"])</script><script>self.__next_f.push([1,"7:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Lb\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lc\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$Ld\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$Le\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$Lf\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$10\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$11\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$12\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$13\",\"functional\":\"$14\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$15\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$16\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$17\",\"offCanvas\":\"$18\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$19\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$1a\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1b\",\"main\":\"$1c\",\"withLink\":\"$1d\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$1e\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L1f\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L20\",null,{\"children\":[[\"$\",\"$L21\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L22\",null,{}]}],[\"$\",\"$L23\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L24\",null,{\"children\":[[\"$\",\"$Lf\",null,{\"docs\":[{\"mdxSource\":\"$25\",\"examples\":\"$29\",\"slugs\":\"$2a\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$31\",\"examples\":\"$34\",\"slugs\":\"$36\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$37\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4a\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$5b\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$65\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$66\",\"examples\":\"$69\",\"slugs\":\"$6a\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a6\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$a7\",\"examples\":\"$aa\",\"slugs\":\"$ab\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$ac\",\"examples\":\"$af\",\"slugs\":\"$b0\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b1\",\"examples\":\"$b4\",\"slugs\":\"$b6\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c6\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cd\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d3\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d4\",\"examples\":\"$d7\",\"slugs\":\"$d8\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$de\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$df\",\"examples\":\"$e2\",\"slugs\":\"$e3\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e4\",\"examples\":\"$e7\",\"slugs\":\"$e8\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f7\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$109\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10f\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L110\",null,{\"docs\":\"$111\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L13e\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L110\",null,{\"docs\":[{\"mdxSource\":\"$25\",\"examples\":\"$29\",\"slugs\":\"$2a\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$31\",\"examples\":\"$34\",\"slugs\":\"$36\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$37\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4a\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$5b\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$65\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$66\",\"examples\":\"$69\",\"slugs\":\"$6a\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a6\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$a7\",\"examples\":\"$aa\",\"slugs\":\"$ab\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$ac\",\"examples\":\"$af\",\"slugs\":\"$b0\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b1\",\"examples\":\"$b4\",\"slugs\":\"$b6\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c6\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cd\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d3\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d4\",\"examples\":\"$d7\",\"slugs\":\"$d8\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$de\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$df\",\"examples\":\"$e2\",\"slugs\":\"$e3\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e4\",\"examples\":\"$e7\",\"slugs\":\"$e8\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f7\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$109\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10f\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$13f\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$140\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$141\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$142\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"8:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Flow – mittwald Design System\"}]]\n4:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/_next/static/2c-h0Ersq1MVZuW8fg_eQ/_buildManifest.js b/docs/chore/cleanup-preview-repo/_next/static/Zf5W7DOBxxfgb2jLNKH3t/_buildManifest.js
similarity index 100%
rename from docs/chore/cleanup-preview-repo/_next/static/2c-h0Ersq1MVZuW8fg_eQ/_buildManifest.js
rename to docs/chore/cleanup-preview-repo/_next/static/Zf5W7DOBxxfgb2jLNKH3t/_buildManifest.js
diff --git a/docs/chore/cleanup-preview-repo/_next/static/2c-h0Ersq1MVZuW8fg_eQ/_ssgManifest.js b/docs/chore/cleanup-preview-repo/_next/static/Zf5W7DOBxxfgb2jLNKH3t/_ssgManifest.js
similarity index 100%
rename from docs/chore/cleanup-preview-repo/_next/static/2c-h0Ersq1MVZuW8fg_eQ/_ssgManifest.js
rename to docs/chore/cleanup-preview-repo/_next/static/Zf5W7DOBxxfgb2jLNKH3t/_ssgManifest.js
diff --git a/docs/chore/cleanup-preview-repo/index.html b/docs/chore/cleanup-preview-repo/index.html
index 149fb878e0..e69ed0a2c3 100644
--- a/docs/chore/cleanup-preview-repo/index.html
+++ b/docs/chore/cleanup-preview-repo/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html id="__next_error__"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js"/><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/927-6cab5a8cbc905115.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><title>Flow – mittwald Design System</title><link rel="icon" href="/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script></head><body><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"3:I[20122,[],\"\"]\n8:I[16872,[],\"\"]\n9:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"2c-h0Ersq1MVZuW8fg_eQ\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/\",\"initialTree\":[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"__PAGE__\",{},[[\"$L4\",\"$L5\"],null],null]},[\"$L6\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L7\"],\"globalErrorComponent\":\"$8\",\"missingSlots\":\"$W9\"}]]\n5:E{\"digest\":\"NEXT_REDIRECT;replace;01-getting-started/installation;307;\"}\n"])</script><script>self.__next_f.push([1,"a:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nb:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\nc:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\nd:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\ne:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n1e:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n1f:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n20:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n21:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d"])</script><script>self.__next_f.push([1,"709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n22:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n23:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n10f:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n13d:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n13e:I[68648,[],\"\"]\n13f:I[91385,[],\"\"]\nf:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"10:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"11:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n12:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"13:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"14:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n15:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n16:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n17:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n18:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n19:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1a:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1b:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1c:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1d:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n25:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"26:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n27:{}\n24:{\"compiledSource\":\"$25\",\"frontmatter\":\"$26\",\"scope\":\"$27\"}\n28:{}\n29:[\"01-getting-started\",\"installation\"]\n2b:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2c:{}\n2d:{}\n2a:{\"compiledSource\":\"$2b\",\"frontmatter\":\"$2c\",\"scope\":\"$2d\"}\n2e:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n2f:[\"01-getting-started\",\"stylesheet\"]\n31:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n32:{}\n30:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n34:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n33:{\"confirmation\":\"$34\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n35:[\"02-components\",\"actions\",\"action\"]\n37:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n38:{}\n36:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3a:[\"02-components\",\"actions\",\"button-group\"]\n3c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n3d:{}\n3b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n"])</script><script>self.__next_f.push([1,"3e:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"3f:[\"02-components\",\"actions\",\"button\"]\n41:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n42:{}\n40:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$41\",\"scope\":\"$42\"}\n"])</script><script>self.__next_f.push([1,"43:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"44:[\"02-components\",\"actions\",\"context-menu\"]\n46:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n47:{}\n45:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$46\",\"scope\":\"$47\"}\n48:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n49:[\"02-components\",\"actions\",\"copy-button\"]\n4b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n4c:{}\n4a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4b\",\"scope\":\"$4c\"}\n4d:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n4e:[\"02-components\",\"content\",\"avatar\"]\n50:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n51:{}\n4f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$50\",\"scope\":\"$51\"}\n52:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n53:[\"02-components\",\"content\",\"heading\"]\n55:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n56:{}\n54:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$55\",\"scope\":\"$56\"}\n58:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"59:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"57:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$58\",\"functional\":\"$59\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5a:[\"02-components\",\"content\",\"icon\"]\n5c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n5d:{}\n5b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n5f:[\"02-components\",\"content\",\"illustrated-message\"]\n61:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n62:{}\n60:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$61\",\"scope\":\"$62\"}\n63:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n64:[\"02-components\",\"content\",\"image\"]\n66:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n67:{}\n65:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n68:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n69:[\"02-components\",\"content\",\"inline-code\"]\n6b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n6c:{}\n6a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6b\",\"scope\":\"$6c\"}\n6d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n6e:[\"02-components\",\"content\",\"label\"]\n70:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n71:{}\n6f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$70\",\"scope\":\"$71\"}\n72:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n73:[\"02-components\",\"content\",\"labeled-value\"]\n75:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n76:{}\n74:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$75\",\"scope\":\"$76\"}\n77:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n78:[\"02-components\",\"content\",\"skeleton\"]\n7a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7b:{}\n79:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7a\",\"scope\":\"$7b\"}\n7c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n7d:[\"02-components\",\"content\",\"text\"]\n7f:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n80:{}\n7e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7f\",\"scope\":\"$80\"}\n81:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n82:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n84:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n85:{}\n83:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$84\",\"scope\":\"$85\"}\n86:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n87:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n89:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8a:{}\n88:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$89\",\"scope\":\"$8a\"}\n8b:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n8c:[\"02-components\",\"form-controls\",\"checkbox\"]\n8e:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n8f:{}\n8d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8e\",\"scope\":\"$8f\"}\n90:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n91:[\"02-components\",\"form-controls\",\"number-field\"]\n93:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n94:{}\n92:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$93\",\"scope\":\"$94\"}\n"])</script><script>self.__next_f.push([1,"95:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"96:[\"02-components\",\"form-controls\",\"radio-group\"]\n98:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n99:{}\n97:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$98\",\"scope\":\"$99\"}\n9a:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9b:[\"02-components\",\"form-controls\",\"select\"]\n9d:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\n9e:{}\n9c:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9d\",\"scope\":\"$9e\"}\n9f:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na0:[\"02-components\",\"form-controls\",\"switch\"]\na2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na3:{}\na1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a2\",\"scope\":\"$a3\"}\na4:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na5:[\"02-components\",\"form-controls\",\"text-area\"]\na7:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\na8:{}\na6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a7\",\"scope\":\"$a8\"}\na9:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\naa:[\"02-components\",\"form-controls\",\"text-field\"]\nac:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nad:{}\nab:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ac\",\"scope\":\"$ad\"}\nae:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\naf:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb2:{}\nb0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b1\",\"scope\":\"$b2\"}\nb4:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb3:{\"contextMenu\":\"$b4\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb5:[\"02-components\",\"navigation\",\"header-navigation\"]\nb7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nb8:{}\nb6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b7\",\"scope\":\"$b8\"}\nb9:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nba:[\"02-components\",\"navigation\",\"link\"]\nbc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nbd:{}\nbb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bc\",\"scope\":\"$bd\"}\n"])</script><script>self.__next_f.push([1,"be:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"bf:[\"02-components\",\"navigation\",\"navigation\"]\nc1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc2:{}\nc0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c1\",\"scope\":\"$c2\"}\nc4:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc3:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c4\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc5:[\"02-components\",\"navigation\",\"tabs\"]\nc7:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\nc8:{}\nc6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncb:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\nc9:{\"default\":\"$ca\",\"offCanvas\":\"$cb\"}\ncc:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nce:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\ncf:{}\ncd:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ce\",\"scope\":\"$cf\"}\nd1:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd0:{\"default\":\"$d1\"}\nd2:[\"02-components\",\"overlays\",\"off-canvas\"]\nd4:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd5:{}\nd3:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d4\",\"scope\":\"$d5\"}\nd6:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nd7:[\"02-components\",\"overlays\",\"tooltip\"]\nd9:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nda:{}\nd8:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d9\",\"scope\":\"$da\"}\ndc:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndb:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$dc\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ndd:[\"02-components\",\"status\",\"inline-alert\"]\ndf:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne0:{}\nde:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$df\",\"scope\":\"$e0\"}\ne1:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne2:[\"02-components\",\"status\",\"loading-spinner\"]\ne4:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne5:{}\ne3:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e4\",\"scope\":\"$e5\"}\ne6:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\ne7:[\"02-components\",\"status\",\"progress-bar\"]\ne9:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nea:{}\ne8:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e9\",\"scope\":\"$ea\"}\neb:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nec:[\"02-components\",\"status\",\"status-badge\"]\nee:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nef:{}\ned:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ee\",\"scope\":\"$ef\"}\nf0:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf1:[\"02-components\",\"status\",\"status-icon\"]\nf3:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf4:{}\nf2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f3\",\"scope\":\"$f4\"}\nf5:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"6:[\"02-components\",\"structure\",\"accordion\"]\nf8:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nf9:{}\nf7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f8\",\"scope\":\"$f9\"}\nfa:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nfb:[\"02-components\",\"structure\",\"column-layout\"]\nfd:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\nfe:{}\nfc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n100:[\"02-components\",\"structure\",\"layout-card\"]\n102:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n103:{}\n101:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {u"])</script><script>self.__next_f.push([1,"seMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n105:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n       "])</script><script>self.__next_f.push([1,"     \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n106:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n107:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/"])</script><script>self.__next_f.push([1,"list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n104:{\"default\":\"$105\",\"main\":\"$106\",\"withLink\":\"$107\"}\n108:[\"02-components\",\"structure\",\"list\"]\n10a:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10b:{}\n109:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXL"])</script><script>self.__next_f.push([1,"ayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10a\",\"scope\":\"$10b\"}\n10d:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n10c:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\""])</script><script>self.__next_f.push([1,"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$10d\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n10e:[\"02-components\",\"structure\",\"section\"]\n111:{\"mdxSource\":\"$24\",\"examples\":\"$28\",\"slugs\":\"$29\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n112:{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n113:{\"mdxSource\":\"$30\",\"examples\":\"$33\",\"slugs\":\"$35\",\"filename\":\"02-components/actions/action/index.mdx\"}\n114:{\"mdxSource\":\"$36\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n115:{\"mdxSource\":\"$3b\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-components/actions/button/index.mdx\"}\n116:{\"mdxSource\":\"$40\",\"example"])</script><script>self.__next_f.push([1,"s\":\"$43\",\"slugs\":\"$44\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n117:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$49\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n118:{\"mdxSource\":\"$4a\",\"examples\":\"$4d\",\"slugs\":\"$4e\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n119:{\"mdxSource\":\"$4f\",\"examples\":\"$52\",\"slugs\":\"$53\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11a:{\"mdxSource\":\"$54\",\"examples\":\"$57\",\"slugs\":\"$5a\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11b:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n11c:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"02-components/content/image/index.mdx\"}\n11d:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$69\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n11e:{\"mdxSource\":\"$6a\",\"examples\":\"$6d\",\"slugs\":\"$6e\",\"filename\":\"02-components/content/label/index.mdx\"}\n11f:{\"mdxSource\":\"$6f\",\"examples\":\"$72\",\"slugs\":\"$73\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n120:{\"mdxSource\":\"$74\",\"examples\":\"$77\",\"slugs\":\"$78\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n121:{\"mdxSource\":\"$79\",\"examples\":\"$7c\",\"slugs\":\"$7d\",\"filename\":\"02-components/content/text/index.mdx\"}\n122:{\"mdxSource\":\"$7e\",\"examples\":\"$81\",\"slugs\":\"$82\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n123:{\"mdxSource\":\"$83\",\"examples\":\"$86\",\"slugs\":\"$87\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n124:{\"mdxSource\":\"$88\",\"examples\":\"$8b\",\"slugs\":\"$8c\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n125:{\"mdxSource\":\"$8d\",\"examples\":\"$90\",\"slugs\":\"$91\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n126:{\"mdxSource\":\"$92\",\"examples\":\"$95\",\"slugs\":\"$96\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n127:{\"mdxSource\":\"$97\",\"examples\":\"$9a\",\"slugs\":\"$9b\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n128:{\"mdxSource\":\"$9c\",\"examples\":\"$9f\",\"slugs\":\"$a0\","])</script><script>self.__next_f.push([1,"\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n129:{\"mdxSource\":\"$a1\",\"examples\":\"$a4\",\"slugs\":\"$a5\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12a:{\"mdxSource\":\"$a6\",\"examples\":\"$a9\",\"slugs\":\"$aa\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12b:{\"mdxSource\":\"$ab\",\"examples\":\"$ae\",\"slugs\":\"$af\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n12c:{\"mdxSource\":\"$b0\",\"examples\":\"$b3\",\"slugs\":\"$b5\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n12d:{\"mdxSource\":\"$b6\",\"examples\":\"$b9\",\"slugs\":\"$ba\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n12e:{\"mdxSource\":\"$bb\",\"examples\":\"$be\",\"slugs\":\"$bf\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n12f:{\"mdxSource\":\"$c0\",\"examples\":\"$c3\",\"slugs\":\"$c5\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n130:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cc\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n131:{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n132:{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n133:{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dd\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n134:{\"mdxSource\":\"$de\",\"examples\":\"$e1\",\"slugs\":\"$e2\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n135:{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n136:{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n137:{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n138:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f6\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n139:{\"mdxSource\":\"$f7\",\"examples\":\"$fa\",\"slugs\":\"$fb\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13a:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"02-com"])</script><script>self.__next_f.push([1,"ponents/structure/layout-card/index.mdx\"}\n13b:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$108\",\"filename\":\"02-components/structure/list/index.mdx\"}\n13c:{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10e\",\"filename\":\"02-components/structure/section/index.mdx\"}\n110:[\"$111\",\"$112\",\"$113\",\"$114\",\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\"]\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$La\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lb\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$Lc\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$Ld\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$Le\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$f\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$10\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$11\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$12\",\"functional\":\"$13\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$14\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$15\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$16\",\"offCanvas\":\"$17\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$18\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$19\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"main\":\"$1b\",\"withLink\":\"$1c\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$1d\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L1e\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L1f\",null,{\"children\":[[\"$\",\"$L20\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L21\",null,{}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$Le\",null,{\"docs\":[{\"mdxSource\":\"$24\",\"examples\":\"$28\",\"slugs\":\"$29\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$30\",\"examples\":\"$33\",\"slugs\":\"$35\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$36\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$49\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4a\",\"examples\":\"$4d\",\"slugs\":\"$4e\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$4f\",\"examples\":\"$52\",\"slugs\":\"$53\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$54\",\"examples\":\"$57\",\"slugs\":\"$5a\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$69\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6a\",\"examples\":\"$6d\",\"slugs\":\"$6e\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$6f\",\"examples\":\"$72\",\"slugs\":\"$73\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$74\",\"examples\":\"$77\",\"slugs\":\"$78\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$79\",\"examples\":\"$7c\",\"slugs\":\"$7d\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$7e\",\"examples\":\"$81\",\"slugs\":\"$82\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$83\",\"examples\":\"$86\",\"slugs\":\"$87\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$88\",\"examples\":\"$8b\",\"slugs\":\"$8c\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$8d\",\"examples\":\"$90\",\"slugs\":\"$91\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$92\",\"examples\":\"$95\",\"slugs\":\"$96\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$97\",\"examples\":\"$9a\",\"slugs\":\"$9b\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$9c\",\"examples\":\"$9f\",\"slugs\":\"$a0\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a1\",\"examples\":\"$a4\",\"slugs\":\"$a5\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$a6\",\"examples\":\"$a9\",\"slugs\":\"$aa\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$ab\",\"examples\":\"$ae\",\"slugs\":\"$af\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b0\",\"examples\":\"$b3\",\"slugs\":\"$b5\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$b6\",\"examples\":\"$b9\",\"slugs\":\"$ba\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bb\",\"examples\":\"$be\",\"slugs\":\"$bf\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c0\",\"examples\":\"$c3\",\"slugs\":\"$c5\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cc\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dd\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$de\",\"examples\":\"$e1\",\"slugs\":\"$e2\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f6\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$f7\",\"examples\":\"$fa\",\"slugs\":\"$fb\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$108\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10e\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L10f\",null,{\"docs\":\"$110\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L13d\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L10f\",null,{\"docs\":[{\"mdxSource\":\"$24\",\"examples\":\"$28\",\"slugs\":\"$29\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$30\",\"examples\":\"$33\",\"slugs\":\"$35\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$36\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$49\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4a\",\"examples\":\"$4d\",\"slugs\":\"$4e\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$4f\",\"examples\":\"$52\",\"slugs\":\"$53\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$54\",\"examples\":\"$57\",\"slugs\":\"$5a\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$69\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6a\",\"examples\":\"$6d\",\"slugs\":\"$6e\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$6f\",\"examples\":\"$72\",\"slugs\":\"$73\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$74\",\"examples\":\"$77\",\"slugs\":\"$78\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$79\",\"examples\":\"$7c\",\"slugs\":\"$7d\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$7e\",\"examples\":\"$81\",\"slugs\":\"$82\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$83\",\"examples\":\"$86\",\"slugs\":\"$87\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$88\",\"examples\":\"$8b\",\"slugs\":\"$8c\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$8d\",\"examples\":\"$90\",\"slugs\":\"$91\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$92\",\"examples\":\"$95\",\"slugs\":\"$96\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$97\",\"examples\":\"$9a\",\"slugs\":\"$9b\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$9c\",\"examples\":\"$9f\",\"slugs\":\"$a0\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a1\",\"examples\":\"$a4\",\"slugs\":\"$a5\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$a6\",\"examples\":\"$a9\",\"slugs\":\"$aa\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$ab\",\"examples\":\"$ae\",\"slugs\":\"$af\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b0\",\"examples\":\"$b3\",\"slugs\":\"$b5\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$b6\",\"examples\":\"$b9\",\"slugs\":\"$ba\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bb\",\"examples\":\"$be\",\"slugs\":\"$bf\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c0\",\"examples\":\"$c3\",\"slugs\":\"$c5\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cc\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dd\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$de\",\"examples\":\"$e1\",\"slugs\":\"$e2\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f6\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$f7\",\"examples\":\"$fa\",\"slugs\":\"$fb\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$108\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10e\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L13e\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L13f\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"7:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Flow – mittwald Design System\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n4:null\n"])</script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html id="__next_error__"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js"/><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/927-6cab5a8cbc905115.js" async=""></script><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><title>Flow – mittwald Design System</title><link rel="icon" href="/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script></head><body><script src="/flow-previews/docs/chore/cleanup-preview-repo/_next/static/chunks/webpack-246323c43151c3a2.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"style\"]\n2:HL[\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"3:I[20122,[],\"\"]\n8:I[16872,[],\"\"]\n9:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"Zf5W7DOBxxfgb2jLNKH3t\",\"assetPrefix\":\"/flow-previews/docs/chore/cleanup-preview-repo\",\"initialCanonicalUrl\":\"/\",\"initialTree\":[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"__PAGE__\",{},[[\"$L4\",\"$L5\"],null],null]},[\"$L6\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L7\"],\"globalErrorComponent\":\"$8\",\"missingSlots\":\"$W9\"}]]\n5:E{\"digest\":\"NEXT_REDIRECT;replace;01-getting-started/installation;307;\"}\n"])</script><script>self.__next_f.push([1,"a:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"LinkProvider\"]\nb:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMittwald\"]\nc:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\nd:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\ne:I[1543,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n1e:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"HeaderNavigation\"]\n1f:I[72512,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OverlayTrigger\"]\n20:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"Button\"]\n21:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d"])</script><script>self.__next_f.push([1,"709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"IconMenu\"]\n22:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"OffCanvas\"]\n23:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"Section\"]\n10f:I[18001,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"185\",\"static/chunks/app/layout-3b1912d54e46d7f7.js\"],\"default\"]\n13d:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"74\",\"static/chunks/74-67d40533ec347d4f.js\",\"416\",\"static/chunks/416-1dd9870f9bc411a7.js\",\"81\",\"static/chunks/81-f9a6f09548b7e67f.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js\"],\"default\"]\n13e:I[68648,[],\"\"]\n13f:I[91385,[],\"\"]\nf:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"10:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"11:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n12:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"13:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"14:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n15:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n16:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Bu"])</script><script>self.__next_f.push([1,"tton\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n17:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\n18:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from"])</script><script>self.__next_f.push([1," \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\n19:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nicht auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\n1a:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/"])</script><script>self.__next_f.push([1,"content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1b:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/"])</script><script>self.__next_f.push([1,"flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1c:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMen"])</script><script>self.__next_f.push([1,"uItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1d:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n25:Tbf3,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    strong: \"strong\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\"\n  }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _components;\n  if (!Content) _missingMdxReference(\"Content\", true);\n  if (!Heading) _missingMdxReference(\"Heading\", true);\n  if (!InlineAlert) _missingMdxReference(\"InlineAlert\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(InlineAlert, {\n      children: [_jsx(Heading, {\n        children: \"Hinweis zu frühem Entwicklungsstand und Stabilität\"\n      }), _jsx(Content, {\n        children: _jsxs(_components.p, {\n          children: [\"Dieses Projekt befindet sich in einer \", _jsx(_components.strong, {\n            children: \"frühen Entwicklungsphase\"\n          }), \" weswegen\\nwir keine Garantie zur Stabilität bieten können. Du kannst dieses Projekt\\ndennoch gerne ausprobieren, verlasse dich aber bitte nicht darauf das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"26:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n27:{}\n24:{\"compiledSource\":\"$25\",\"frontmatter\":\"$26\",\"scope\":\"$27\"}\n28:{}\n29:[\"01-getting-started\",\"installation\"]\n2b:T18a2,"])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    hr: \"hr\",\n    h2: \"h2\",\n    code: \"code\",\n    pre: \"pre\",\n    h3: \"h3\",\n    h4: \"h4\",\n    strong: \"strong\"\n  }, _provideComponents(), props.components), {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Die Flow-Komponenten-Bibliotheken werden über ein gemeinsames Stylesheet, das\\nauch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,\\nwenn du dein eigenes Framework verwendest, um Komponenten zu bauen, und dich\\ndabei an die mittwald Styling Guidelines halten willst.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet\\ninstallieren kannst und wie die Klassennamen strukturiert sind.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation des Standalone Stylesheets\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Zum aktuellen Entwicklungsstand des Projektes kannst du das Stylesheet nur über\\nNPM installieren. Die Flow-Stylesheet-Bibliothek kann über einen Package Manager\\nwie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or \", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"yarn add @mittwald/flow-stylesheet\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-stylesheet/css\\\";\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung des Stylesheets\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um anfangen zu können solltest du verstehen wie die Klassennamen strukturiert\\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2c:{}\n2d:{}\n2a:{\"compiledSource\":\"$2b\",\"frontmatter\":\"$2c\",\"scope\":\"$2d\"}\n2e:{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n2f:[\"01-getting-started\",\"stylesheet\"]\n31:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n32:{}\n30:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined"])</script><script>self.__next_f.push([1,": you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n34:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/02-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\n\n\u003cAction action={sleepLong}\u003e\n  \u003cModal slot=\"actionConfirm\"\u003e\n    \u003cHeading\u003eProjekt löschen\u003c/Heading\u003e\n    \u003cContent\u003e\n      Das Löschen eines Projektes kann nicht rückgängig\n      gemacht werden. Möchtest Du das Projekt\n      \u0026quot;Test\u0026quot; dennoch löschen?\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cButton color=\"danger\"\u003e\n        Unwiederbringlich löschen\n      \u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n        Abbrechen\n      \u003c/Button\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n33:{\"confirmation\":\"$34\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n35:[\"02-components\",\"actions\",\"action\"]\n37:{\"component\":\""])</script><script>self.__next_f.push([1,"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n38:{}\n36:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"}\n3a:[\"02-components\",\"actions\",\"button-group\"]\n3c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n3d:{}\n3b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n"])</script><script>self.__next_f.push([1,"3e:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"3f:[\"02-components\",\"actions\",\"button\"]\n41:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n42:{}\n40:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$41\",\"scope\":\"$42\"}\n"])</script><script>self.__next_f.push([1,"43:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"44:[\"02-components\",\"actions\",\"context-menu\"]\n46:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n47:{}\n45:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$46\",\"scope\":\"$47\"}\n48:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n49:[\"02-components\",\"actions\",\"copy-button\"]\n4b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n4c:{}\n4a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx("])</script><script>self.__next_f.push([1,"MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4b\",\"scope\":\"$4c\"}\n4d:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGilli"])</script><script>self.__next_f.push([1,"an Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"}\n4e:[\"02-components\",\"content\",\"avatar\"]\n50:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n51:{}\n4f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$50\",\"scope\":\"$51\"}\n52:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1"])</script><script>self.__next_f.push([1," Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"}\n53:[\"02-components\",\"content\",\"heading\"]\n55:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n56:{}\n54:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$55\",\"scope\":\"$56\"}\n58:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"59:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"57:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$58\",\"functional\":\"$59\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"5a:[\"02-components\",\"content\",\"icon\"]\n5c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n5d:{}\n5b:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-componen"])</script><script>self.__next_f.push([1,"ts/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"}\n5f:[\"02-components\",\"content\",\"illustrated-message\"]\n61:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n62:{}\n60:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$61\",\"scope\":\"$62\"}\n63:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n64:[\"02-components\",\"content\",\"image\"]\n66:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n67:{}\n65:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {"])</script><script>self.__next_f.push([1,"useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n68:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n69:[\"02-components\",\"content\",\"inline-code\"]\n6b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n6c:{}\n6a:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6b\",\"scope\":\"$6c\"}\n6d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n6e:[\"02-components\",\"content\",\"label\"]\n70:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n71:{}\n6f:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$70\",\"scope\":\"$71\"}\n72:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\"])</script><script>self.__next_f.push([1,"\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"}\n73:[\"02-components\",\"content\",\"labeled-value\"]\n75:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n76:{}\n74:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"compone"])</script><script>self.__next_f.push([1,"nt\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$75\",\"scope\":\"$76\"}\n77:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n78:[\"02-components\",\"content\",\"skeleton\"]\n7a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n7b:{}\n79:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7a\",\"scope\":\"$7b\"}\n7c:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}"])</script><script>self.__next_f.push([1,"\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n7d:[\"02-components\",\"content\",\"text\"]\n7f:{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n80:{}\n7e:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7f\",\"scope\":\"$80\"}\n81:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n82:[\"02-components\",\"form-controls\",\"checkbox-button\"]\n84:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n85:{}\n83:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\"])</script><script>self.__next_f.push([1,"n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$84\",\"scope\":\"$85\"}\n86:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n87:[\"02-components\",\"form-controls\",\"checkbox-group\"]\n89:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n8a:{}\n88:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$89\",\"scope\":\"$8a\"}\n8b:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n8c:[\"02-components\",\"form-controls\",\"checkbox\"]\n8e:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n8f:{}\n8d:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Ob"])</script><script>self.__next_f.push([1,"ject.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8e\",\"scope\":\"$8f\"}\n90:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-"])</script><script>self.__next_f.push([1,"react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"}\n91:[\"02-components\",\"form-controls\",\"number-field\"]\n93:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\n94:{}\n92:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$93\",\"scope\":\"$94\"}\n"])</script><script>self.__next_f.push([1,"95:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"96:[\"02-components\",\"form-controls\",\"radio-group\"]\n98:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\n99:{}\n97:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$98\",\"scope\":\"$99\"}\n9a:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\n9b:[\"02-components\",\"form-controls\",\"select\"]\n9d:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\n9e:{}\n9c:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props"])</script><script>self.__next_f.push([1,".components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9d\",\"scope\":\"$9e\"}\n9f:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\na0:[\"02-components\",\"form-controls\",\"switch\"]\na2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\na3:{}\na1:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunc"])</script><script>self.__next_f.push([1,"tion _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a2\",\"scope\":\"$a3\"}\na4:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"}\na5:[\"02-components\",\"form-controls\",\"text-area\"]\na7:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\na8:{}\na6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"L"])</script><script>self.__next_f.push([1,"iveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a7\",\"scope\":\"$a8\"}\na9:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"}\naa:[\"02-components\",\"form-controls\",\"text-field\"]\nac:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\nad:{}\nab:{\"compiledSource\":\""])</script><script>self.__next_f.push([1,"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ac\",\"scope\":\"$ad\"}\nae:{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\naf:[\"02-components\",\"navigation\",\"breadcrumb\"]\nb1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nb2:{}\nb0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assig"])</script><script>self.__next_f.push([1,"n({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b1\",\"scope\":\"$b2\"}\nb4:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavig"])</script><script>self.__next_f.push([1,"ation\u003e;\nb3:{\"contextMenu\":\"$b4\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"}\nb5:[\"02-components\",\"navigation\",\"header-navigation\"]\nb7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nb8:{}\nb6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfuncti"])</script><script>self.__next_f.push([1,"on _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b7\",\"scope\":\"$b8\"}\nb9:{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"}\nba:[\"02-components\",\"navigation\",\"link\"]\nbc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nbd:{}\nbb:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (comp"])</script><script>self.__next_f.push([1,"onent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bc\",\"scope\":\"$bd\"}\n"])</script><script>self.__next_f.push([1,"be:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"bf:[\"02-components\",\"navigation\",\"navigation\"]\nc1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nc2:{}\nc0:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c1\",\"scope\":\"$c2\"}\nc4:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/T"])</script><script>self.__next_f.push([1,"abTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\nc3:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$c4\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n  "])</script><script>self.__next_f.push([1,"  \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\nc5:[\"02-components\",\"navigation\",\"tabs\"]\nc7:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\nc8:{}\nc6:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T552,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal\u003e\n    \u003cHeading\u003eNe"])</script><script>self.__next_f.push([1,"ue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\ncb:T55c,import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n  \u003cModal offCanvas\u003e\n    \u003cHeading\u003eNeue Organisation\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cText\u003e\n        Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cButtonGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cButton color=\"accent\"\u003eOrganisation anlegen\u003c/Button\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ButtonGroup\u003e\n  \u003c/Modal\u003e\n\u003c/OverlayTrigger\u003e;\nc9:{\"default\":\"$ca\",\"offCanvas\":\"$cb\"}\ncc:[\"02"])</script><script>self.__next_f.push([1,"-components\",\"overlays\",\"modal\"]\nce:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\ncf:{}\ncd:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ce\",\"scope\":\"$cf\"}\nd1:T480,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas from \"@mittwald/flow-react-components/OffCanvas\";\nimport {\n  IconCustomer,\n  IconMenu,\n  IconProject,\n  IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Navigation from \"@mittwald/flow-react-components/Navigation\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { OverlayTrigger } from \"@mittwald/flow-react-components/OverlayTrigger\";\n\n\u003cOverlayTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eMenü\u003c/Heading\u003e\n      \u003cNavigation aria-label=\"Main menu\"\u003e\n        \u003cLi"])</script><script>self.__next_f.push([1,"nk\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\n          \u003cText\u003eProject\u003c/Text\u003e\n        \u003c/Link\u003e\n      \u003c/Navigation\u003e\n    \u003c/Section\u003e\n  \u003c/OffCanvas\u003e\n\u003c/OverlayTrigger\u003e;\nd0:{\"default\":\"$d1\"}\nd2:[\"02-components\",\"overlays\",\"off-canvas\"]\nd4:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nd5:{}\nd3:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d4\",\"scope\":\"$d5\"}\nd6:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nd7:[\"02-components\",\"overlays\",\"tooltip\"]\nd9:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhal"])</script><script>self.__next_f.push([1,"b des Contents an.\"}\nda:{}\nd8:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d9\",\"scope\":\"$da\"}\ndc:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      ausgestellt werden, da die Domain per IP nich"])</script><script>self.__next_f.push([1,"t auf\n      deine Server-IP zeigt.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"success\"\u003e\n    \u003cHeading\u003eDeine App wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\ndb:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$dc\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\ndd:[\"02-components\",\"status\",\"inline-alert\"]\ndf:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\ne0:{}\nde:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdx"])</script><script>self.__next_f.push([1,"Content(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$df\",\"scope\":\"$e0\"}\ne1:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\ne2:[\"02-components\",\"status\",\"loading-spinner\"]\ne4:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\ne5:{}\ne3:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e4\",\"scope\":\"$e5\"}\ne6:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue="])</script><script>self.__next_f.push([1,"{0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\ne7:[\"02-components\",\"status\",\"progress-bar\"]\ne9:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\nea:{}\ne8:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e9\",\"scope\":\"$ea\"}\neb:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"s"])</script><script>self.__next_f.push([1,"tatus\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\nec:[\"02-components\",\"status\",\"status-badge\"]\nee:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\nef:{}\ned:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ee\",\"scope\":\"$ef\"}\nf0:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\nf1:[\"02-components\",\"status\",\"status-icon\"]\nf3:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu C"])</script><script>self.__next_f.push([1,"ontent-Bereiche ein- und auszublenden.\"}\nf4:{}\nf2:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f3\",\"scope\":\"$f4\"}\nf5:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\nf"])</script><script>self.__next_f.push([1,"6:[\"02-components\",\"structure\",\"accordion\"]\nf8:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\nf9:{}\nf7:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f8\",\"scope\":\"$f9\"}\nfa:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/"])</script><script>self.__next_f.push([1,"TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\nfb:[\"02-components\",\"structure\",\"column-layout\"]\nfd:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\nfe:{}\nfc:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n100:[\"02-components\",\"structure\",\"layout-card\"]\n102:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n103:{}\n101:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {u"])</script><script>self.__next_f.push([1,"seMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n105:T653,import List, {\n  ListFilter,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"domain\" name=\"Domain\" /\u003e\n  \u003cListSorting\u003cDomain\u003e property=\"type\" name=\"Type\" /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n       "])</script><script>self.__next_f.push([1,"     \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n106:T547,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={2}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003c\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n107:T591,import List, {\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/02-components/structure/"])</script><script>self.__next_f.push([1,"list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\u003cList batchSize={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cLink href=\"#\"\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/Link\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n104:{\"default\":\"$105\",\"main\":\"$106\",\"withLink\":\"$107\"}\n108:[\"02-components\",\"structure\",\"list\"]\n10a:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n10b:{}\n109:{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXL"])</script><script>self.__next_f.push([1,"ayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10a\",\"scope\":\"$10b\"}\n10d:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n10c:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\""])</script><script>self.__next_f.push([1,"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$10d\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n10e:[\"02-components\",\"structure\",\"section\"]\n111:{\"mdxSource\":\"$24\",\"examples\":\"$28\",\"slugs\":\"$29\",\"filename\":\"01-getting-started/installation/index.mdx\"}\n112:{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"}\n113:{\"mdxSource\":\"$30\",\"examples\":\"$33\",\"slugs\":\"$35\",\"filename\":\"02-components/actions/action/index.mdx\"}\n114:{\"mdxSource\":\"$36\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"02-components/actions/button-group/index.mdx\"}\n115:{\"mdxSource\":\"$3b\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-components/actions/button/index.mdx\"}\n116:{\"mdxSource\":\"$40\",\"example"])</script><script>self.__next_f.push([1,"s\":\"$43\",\"slugs\":\"$44\",\"filename\":\"02-components/actions/context-menu/index.mdx\"}\n117:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$49\",\"filename\":\"02-components/actions/copy-button/index.mdx\"}\n118:{\"mdxSource\":\"$4a\",\"examples\":\"$4d\",\"slugs\":\"$4e\",\"filename\":\"02-components/content/avatar/index.mdx\"}\n119:{\"mdxSource\":\"$4f\",\"examples\":\"$52\",\"slugs\":\"$53\",\"filename\":\"02-components/content/heading/index.mdx\"}\n11a:{\"mdxSource\":\"$54\",\"examples\":\"$57\",\"slugs\":\"$5a\",\"filename\":\"02-components/content/icon/index.mdx\"}\n11b:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"}\n11c:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"02-components/content/image/index.mdx\"}\n11d:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$69\",\"filename\":\"02-components/content/inline-code/index.mdx\"}\n11e:{\"mdxSource\":\"$6a\",\"examples\":\"$6d\",\"slugs\":\"$6e\",\"filename\":\"02-components/content/label/index.mdx\"}\n11f:{\"mdxSource\":\"$6f\",\"examples\":\"$72\",\"slugs\":\"$73\",\"filename\":\"02-components/content/labeled-value/index.mdx\"}\n120:{\"mdxSource\":\"$74\",\"examples\":\"$77\",\"slugs\":\"$78\",\"filename\":\"02-components/content/skeleton/index.mdx\"}\n121:{\"mdxSource\":\"$79\",\"examples\":\"$7c\",\"slugs\":\"$7d\",\"filename\":\"02-components/content/text/index.mdx\"}\n122:{\"mdxSource\":\"$7e\",\"examples\":\"$81\",\"slugs\":\"$82\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"}\n123:{\"mdxSource\":\"$83\",\"examples\":\"$86\",\"slugs\":\"$87\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"}\n124:{\"mdxSource\":\"$88\",\"examples\":\"$8b\",\"slugs\":\"$8c\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"}\n125:{\"mdxSource\":\"$8d\",\"examples\":\"$90\",\"slugs\":\"$91\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"}\n126:{\"mdxSource\":\"$92\",\"examples\":\"$95\",\"slugs\":\"$96\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"}\n127:{\"mdxSource\":\"$97\",\"examples\":\"$9a\",\"slugs\":\"$9b\",\"filename\":\"02-components/form-controls/select/index.mdx\"}\n128:{\"mdxSource\":\"$9c\",\"examples\":\"$9f\",\"slugs\":\"$a0\","])</script><script>self.__next_f.push([1,"\"filename\":\"02-components/form-controls/switch/index.mdx\"}\n129:{\"mdxSource\":\"$a1\",\"examples\":\"$a4\",\"slugs\":\"$a5\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"}\n12a:{\"mdxSource\":\"$a6\",\"examples\":\"$a9\",\"slugs\":\"$aa\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"}\n12b:{\"mdxSource\":\"$ab\",\"examples\":\"$ae\",\"slugs\":\"$af\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"}\n12c:{\"mdxSource\":\"$b0\",\"examples\":\"$b3\",\"slugs\":\"$b5\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"}\n12d:{\"mdxSource\":\"$b6\",\"examples\":\"$b9\",\"slugs\":\"$ba\",\"filename\":\"02-components/navigation/link/index.mdx\"}\n12e:{\"mdxSource\":\"$bb\",\"examples\":\"$be\",\"slugs\":\"$bf\",\"filename\":\"02-components/navigation/navigation/index.mdx\"}\n12f:{\"mdxSource\":\"$c0\",\"examples\":\"$c3\",\"slugs\":\"$c5\",\"filename\":\"02-components/navigation/tabs/index.mdx\"}\n130:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cc\",\"filename\":\"02-components/overlays/modal/index.mdx\"}\n131:{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"}\n132:{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"}\n133:{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dd\",\"filename\":\"02-components/status/inline-alert/index.mdx\"}\n134:{\"mdxSource\":\"$de\",\"examples\":\"$e1\",\"slugs\":\"$e2\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"}\n135:{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"02-components/status/progress-bar/index.mdx\"}\n136:{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"02-components/status/status-badge/index.mdx\"}\n137:{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"02-components/status/status-icon/index.mdx\"}\n138:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f6\",\"filename\":\"02-components/structure/accordion/index.mdx\"}\n139:{\"mdxSource\":\"$f7\",\"examples\":\"$fa\",\"slugs\":\"$fb\",\"filename\":\"02-components/structure/column-layout/index.mdx\"}\n13a:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"02-com"])</script><script>self.__next_f.push([1,"ponents/structure/layout-card/index.mdx\"}\n13b:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$108\",\"filename\":\"02-components/structure/list/index.mdx\"}\n13c:{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10e\",\"filename\":\"02-components/structure/section/index.mdx\"}\n110:[\"$111\",\"$112\",\"$113\",\"$114\",\"$115\",\"$116\",\"$117\",\"$118\",\"$119\",\"$11a\",\"$11b\",\"$11c\",\"$11d\",\"$11e\",\"$11f\",\"$120\",\"$121\",\"$122\",\"$123\",\"$124\",\"$125\",\"$126\",\"$127\",\"$128\",\"$129\",\"$12a\",\"$12b\",\"$12c\",\"$12d\",\"$12e\",\"$12f\",\"$130\",\"$131\",\"$132\",\"$133\",\"$134\",\"$135\",\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\"]\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$La\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lb\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$Lc\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$Ld\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$Le\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$f\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-getting-started\",\"installation\"],\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$10\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-getting-started\",\"stylesheet\"],\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"},\"scope\":{}},\"examples\":{\"confirmation\":\"$11\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleep}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"feedback\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\n\\n\u003cAction action={() =\u003e {}} showFeedback\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\",\"longAction\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleepLong } from \\\"@/content/02-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"action\"],\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ButtonGroup\",\"description\":\"Die ButtonGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"danger\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"default\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eOrganisation erstellen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\",\"info\":\"import ButtonGroup from \\\"@mittwald/flow-react-components/ButtonGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButtonGroup\u003e\\n  \u003cButton\u003eOk\u003c/Button\u003e\\n\u003c/ButtonGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button-group\"],\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eErstellen/Speichern\u003c/Button\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eLöschen/Kündigen\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton\\n  onPress={() =\u003e {\\n    alert(\\\"Button gedrückt\\\");\\n  }}\\n\u003e\\n  Fortfahren/Aktion\\n\u003c/Button\u003e;\\n\",\"icon\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton aria-label=\\\"Home\\\"\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Button\u003e;\\n\",\"iconText\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { IconChevronDown } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cButton\u003e\\n  \u003cText\u003eE-Mail-Adresse hinzufügen\u003c/Text\u003e\\n  \u003cIconChevronDown /\u003e\\n\u003c/Button\u003e;\\n\",\"inverse\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton inverse\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"plain\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"small\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cButton size=\\\"s\\\"\u003eFortfahren/Aktion\u003c/Button\u003e;\\n\",\"soft\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"primary\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"secondary\\\"\u003e\\n    Abbrechen/Zurück\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"accent\\\"\u003e\\n    Erstellen/Speichern\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"danger\\\"\u003e\\n    Löschen/Kündigen\\n  \u003c/Button\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton isDisabled\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isPending\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isSucceeded\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton isFailed\u003eFortfahren/Aktion\u003c/Button\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"button\"],\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"},\"scope\":{}},\"examples\":{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"single-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"single\\\"\\n    defaultSelectedKeys={[\\\"item2\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"item3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"context-menu\"],\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"02-components\",\"actions\",\"copy-button\"],\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"},\"scope\":{}},\"examples\":{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"s\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"m\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar size=\\\"l\\\"\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"avatar\"],\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"icon\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { IconMember } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cHeading\u003e\\n  \u003cIconMember /\u003e\\n  Persönliche Informationen\\n\u003c/Heading\u003e;\\n\",\"level-visual\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading level={4} levelVisual={2}\u003e\\n  Das ist eine h4 Überschrift die aussieht wie eine h2\\n  Überschrift\\n\u003c/Heading\u003e;\\n\",\"levels\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003c\u003e\\n  \u003cHeading level={1}\u003e\\n    Das ist eine Level 1 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={2}\u003e\\n    Das ist eine Level 2 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={3}\u003e\\n    Das ist eine Level 3 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={4}\u003e\\n    Das ist eine Level 4 Überschrift\\n  \u003c/Heading\u003e\\n  \u003cHeading level={5}\u003e\\n    Das ist eine Level 5 Überschrift\\n  \u003c/Heading\u003e\\n\u003c/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"heading\"],\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"},\"scope\":{}},\"examples\":{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$12\",\"functional\":\"$13\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n() =\u003e {\\n  const svgString = `\\\\\\n    \u003csvg viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n      \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n    \u003c/svg\u003e\\n  `;\\n\\n  return \u003cIcon\u003e{svgString}\u003c/Icon\u003e;\\n};\\n\",\"svg\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\n\u003cIcon\u003e\\n  \u003csvg\\n    viewBox=\\\"0 0 100 100\\\"\\n    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n  \u003e\\n    \u003ccircle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"50\\\" /\u003e\\n  \u003c/svg\u003e\\n\u003c/Icon\u003e;\\n\",\"tabler\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\nimport { IconStar } from \\\"@tabler/icons-react\\\";\\n\\n\u003cIcon\u003e\\n  \u003cIconStar /\u003e\\n\u003c/Icon\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"icon\"],\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconDanger } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage variant=\\\"negative\\\"\u003e\\n  \u003cIconDanger /\u003e\\n  \u003cHeading\u003eKein Zugriff\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Du hast keine Berechtigung, um auf diese Seite\\n    zuzugreifen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eZum Dashboard\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"illustrated-message\"],\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"image\"],\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"inline-code\"],\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"label\"],\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"},\"scope\":{}},\"examples\":{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"Projekt ID: p-eWRhpRV\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"default\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n  \u003cContent\u003e20 GB\u003c/Content\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"inline-code\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eIP Adresse\u003c/Label\u003e\\n  \u003cInlineCode\u003e127.0.0.1\u003c/InlineCode\u003e\\n  \u003cCopyButton text=\\\"127.0.0.1\\\" /\u003e\\n\u003c/LabeledValue\u003e;\\n\",\"link\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eDomain\u003c/Label\u003e\\n  \u003cLink\u003ehttps://mittwald.de\u003c/Link\u003e\\n\u003c/LabeledValue\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"labeled-value\"],\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"},\"scope\":{}},\"examples\":{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"skeleton\"],\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"},\"slugs\":[\"02-components\",\"content\",\"text\"],\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"},\"scope\":{}},\"examples\":{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"},\"scope\":{}},\"examples\":{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"checkbox\"],\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"},\"scope\":{}},\"examples\":{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"number-field\"],\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"},\"scope\":{}},\"examples\":{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"radio-group\"],\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"select\"],\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"},\"scope\":{}},\"examples\":{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"switch\"],\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit ssh-rsa\u003c/FieldDescription\u003e\\n\u003c/TextArea\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isDisabled\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextArea isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültiger Key\u003c/FieldError\u003e\\n\u003c/TextArea\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea isRequired\u003e\\n  \u003cLabel\u003ePublic Key\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-area\"],\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User-Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\",\"disabled\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isDisabled\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"invalid\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cTextField isInvalid defaultValue=\\\"hello\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003cFieldError\u003eDas ist keine URL\u003c/FieldError\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField isRequired\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"02-components\",\"form-controls\",\"text-field\"],\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"inverse\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"},\"scope\":{}},\"examples\":{\"contextMenu\":\"$14\",\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Komponenten\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\",\"inverse\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation aria-label=\\\"Header navigation\\\" inverse\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting startet\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    Components\\n  \u003c/Link\u003e\\n  \u003cButton\u003e\\n    \u003cIconSearch /\u003e\\n  \u003c/Button\u003e\\n\u003c/HeaderNavigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"header-navigation\"],\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"},\"scope\":{}},\"examples\":{\"default\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\"\u003eZum Dashboard\u003c/Link\u003e;\\n\",\"icon\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { IconExternalLink } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cLink href=\\\"https://mittwald.de\\\"\u003e\\n  mittwald.de\\n  \u003cIconExternalLink aria-label=\\\"external link\\\" /\u003e\\n\u003c/Link\u003e;\\n\",\"inline\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink inline href=\\\"#\\\"\u003e\\n  Inline link\\n\u003c/Link\u003e;\\n\",\"inlineText\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003e\\n  Sieh dir unser \u003cLink href=\\\"#\\\"\u003eOnboarding\u003c/Link\u003e an um\\n  weitere Informationen zu erhalten.\\n\u003c/Text\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"link\"],\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"},\"scope\":{}},\"examples\":{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconProject /\u003e\\n    \u003cText\u003eProjekte\u003c/Text\u003e\\n  \u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"navigation\"],\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"},\"scope\":{}},\"examples\":{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$15\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"02-components\",\"navigation\",\"tabs\"],\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"$16\",\"offCanvas\":\"$17\"},\"slugs\":[\"02-components\",\"overlays\",\"modal\"],\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"},\"scope\":{}},\"examples\":{\"default\":\"$18\"},\"slugs\":[\"02-components\",\"overlays\",\"off-canvas\"],\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"},\"scope\":{}},\"examples\":{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"},\"slugs\":[\"02-components\",\"overlays\",\"tooltip\"],\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"},\"scope\":{}},\"examples\":{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$19\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"inline-alert\"],\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"loading-spinner\"],\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"},\"scope\":{}},\"examples\":{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar\\n  showMaxValue\\n  value={500}\\n  maxValue={1000}\\n  minValue={0}\\n  formatOptions={{ style: \\\"unit\\\", unit: \\\"gigabyte\\\" }}\\n\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"small\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"progress-bar\"],\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-badge\"],\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"},\"scope\":{}},\"examples\":{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"02-components\",\"status\",\"status-icon\"],\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"},\"scope\":{}},\"examples\":{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"accordion\"],\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\"\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"},\"scope\":{}},\"examples\":{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"column-layout\"],\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"layout-card\"],\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    example: \\\"main\\\",\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\",\"main\":\"$1b\",\"withLink\":\"$1c\"},\"slugs\":[\"02-components\",\"structure\",\"list\"],\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"/*@jsxRuntime automatic @jsxImportSource react*/\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = Object.assign({}, _provideComponents(), props.components);\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\\n    children: _jsx(_createMdxContent, props)\\n  })) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n  \u003cLink href=\\\"#\\\"\u003eNewsletter abonnieren\u003c/Link\u003e\\n\u003c/Section\u003e;\\n\",\"multiple\":\"$1d\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"},\"slugs\":[\"02-components\",\"structure\",\"section\"],\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L1e\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L1f\",null,{\"children\":[[\"$\",\"$L20\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L21\",null,{}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$Le\",null,{\"docs\":[{\"mdxSource\":\"$24\",\"examples\":\"$28\",\"slugs\":\"$29\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$30\",\"examples\":\"$33\",\"slugs\":\"$35\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$36\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$49\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4a\",\"examples\":\"$4d\",\"slugs\":\"$4e\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$4f\",\"examples\":\"$52\",\"slugs\":\"$53\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$54\",\"examples\":\"$57\",\"slugs\":\"$5a\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$69\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6a\",\"examples\":\"$6d\",\"slugs\":\"$6e\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$6f\",\"examples\":\"$72\",\"slugs\":\"$73\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$74\",\"examples\":\"$77\",\"slugs\":\"$78\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$79\",\"examples\":\"$7c\",\"slugs\":\"$7d\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$7e\",\"examples\":\"$81\",\"slugs\":\"$82\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$83\",\"examples\":\"$86\",\"slugs\":\"$87\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$88\",\"examples\":\"$8b\",\"slugs\":\"$8c\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$8d\",\"examples\":\"$90\",\"slugs\":\"$91\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$92\",\"examples\":\"$95\",\"slugs\":\"$96\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$97\",\"examples\":\"$9a\",\"slugs\":\"$9b\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$9c\",\"examples\":\"$9f\",\"slugs\":\"$a0\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a1\",\"examples\":\"$a4\",\"slugs\":\"$a5\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$a6\",\"examples\":\"$a9\",\"slugs\":\"$aa\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$ab\",\"examples\":\"$ae\",\"slugs\":\"$af\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b0\",\"examples\":\"$b3\",\"slugs\":\"$b5\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$b6\",\"examples\":\"$b9\",\"slugs\":\"$ba\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bb\",\"examples\":\"$be\",\"slugs\":\"$bf\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c0\",\"examples\":\"$c3\",\"slugs\":\"$c5\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cc\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dd\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$de\",\"examples\":\"$e1\",\"slugs\":\"$e2\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f6\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$f7\",\"examples\":\"$fa\",\"slugs\":\"$fb\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$108\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10e\",\"filename\":\"02-components/structure/section/index.mdx\"}]}],[\"$\",\"$L10f\",null,{\"docs\":\"$110\"}]]}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L13d\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L10f\",null,{\"docs\":[{\"mdxSource\":\"$24\",\"examples\":\"$28\",\"slugs\":\"$29\",\"filename\":\"01-getting-started/installation/index.mdx\"},{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-getting-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$30\",\"examples\":\"$33\",\"slugs\":\"$35\",\"filename\":\"02-components/actions/action/index.mdx\"},{\"mdxSource\":\"$36\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"02-components/actions/button-group/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-components/actions/button/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"02-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$49\",\"filename\":\"02-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$4a\",\"examples\":\"$4d\",\"slugs\":\"$4e\",\"filename\":\"02-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$4f\",\"examples\":\"$52\",\"slugs\":\"$53\",\"filename\":\"02-components/content/heading/index.mdx\"},{\"mdxSource\":\"$54\",\"examples\":\"$57\",\"slugs\":\"$5a\",\"filename\":\"02-components/content/icon/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"02-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"02-components/content/image/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$69\",\"filename\":\"02-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$6a\",\"examples\":\"$6d\",\"slugs\":\"$6e\",\"filename\":\"02-components/content/label/index.mdx\"},{\"mdxSource\":\"$6f\",\"examples\":\"$72\",\"slugs\":\"$73\",\"filename\":\"02-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$74\",\"examples\":\"$77\",\"slugs\":\"$78\",\"filename\":\"02-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$79\",\"examples\":\"$7c\",\"slugs\":\"$7d\",\"filename\":\"02-components/content/text/index.mdx\"},{\"mdxSource\":\"$7e\",\"examples\":\"$81\",\"slugs\":\"$82\",\"filename\":\"02-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$83\",\"examples\":\"$86\",\"slugs\":\"$87\",\"filename\":\"02-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$88\",\"examples\":\"$8b\",\"slugs\":\"$8c\",\"filename\":\"02-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$8d\",\"examples\":\"$90\",\"slugs\":\"$91\",\"filename\":\"02-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$92\",\"examples\":\"$95\",\"slugs\":\"$96\",\"filename\":\"02-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$97\",\"examples\":\"$9a\",\"slugs\":\"$9b\",\"filename\":\"02-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$9c\",\"examples\":\"$9f\",\"slugs\":\"$a0\",\"filename\":\"02-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$a1\",\"examples\":\"$a4\",\"slugs\":\"$a5\",\"filename\":\"02-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$a6\",\"examples\":\"$a9\",\"slugs\":\"$aa\",\"filename\":\"02-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$ab\",\"examples\":\"$ae\",\"slugs\":\"$af\",\"filename\":\"02-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$b0\",\"examples\":\"$b3\",\"slugs\":\"$b5\",\"filename\":\"02-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$b6\",\"examples\":\"$b9\",\"slugs\":\"$ba\",\"filename\":\"02-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$bb\",\"examples\":\"$be\",\"slugs\":\"$bf\",\"filename\":\"02-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$c0\",\"examples\":\"$c3\",\"slugs\":\"$c5\",\"filename\":\"02-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cc\",\"filename\":\"02-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"02-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"02-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dd\",\"filename\":\"02-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$de\",\"examples\":\"$e1\",\"slugs\":\"$e2\",\"filename\":\"02-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"02-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"02-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"02-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f6\",\"filename\":\"02-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$f7\",\"examples\":\"$fa\",\"slugs\":\"$fb\",\"filename\":\"02-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"02-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$108\",\"filename\":\"02-components/structure/list/index.mdx\"},{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10e\",\"filename\":\"02-components/structure/section/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L13e\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L13f\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"7:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Flow – mittwald Design System\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/chore/cleanup-preview-repo/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n4:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/chore/cleanup-preview-repo/index.txt b/docs/chore/cleanup-preview-repo/index.txt
index 7c8cdc8ffc..986a54c055 100644
--- a/docs/chore/cleanup-preview-repo/index.txt
+++ b/docs/chore/cleanup-preview-repo/index.txt
@@ -1,4 +1,4 @@
-0:["2c-h0Ersq1MVZuW8fg_eQ",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$L3",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L4"]]]]
+0:["Zf5W7DOBxxfgb2jLNKH3t",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$L3",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/8dc788add53f3e94.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/chore/cleanup-preview-repo/_next/static/css/e3620a7ecb792159.css","precedence":"next","crossOrigin":"$undefined"}]],"$L4"]]]]
 2:E{"digest":"NEXT_REDIRECT;replace;01-getting-started/installation;307;"}
 5:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","74","static/chunks/74-67d40533ec347d4f.js","81","static/chunks/81-f9a6f09548b7e67f.js","185","static/chunks/app/layout-3b1912d54e46d7f7.js"],"LinkProvider"]
 6:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","74","static/chunks/74-67d40533ec347d4f.js","416","static/chunks/416-1dd9870f9bc411a7.js","81","static/chunks/81-f9a6f09548b7e67f.js","877","static/chunks/app/%5B...slug%5D/page-38bed95482917cff.js"],"IconMittwald"]